Deshabilitar la barra de desplazamiento vertical en el desbordamiento de div: automático

113

¿Es posible permitir solo una barra de desplazamiento horizontal cuando se usa overflow: auto (o scroll)?

html css scroll scrollbar joedborg
fuente
Tenga en cuenta que margin-bottomcon un valor negativo se meterá con, overflow-y: hiddenetc.
Andrew

Respuestas:

232

Estas dos propiedades de CSS se pueden utilizar para ocultar las barras de desplazamiento:

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal
Luke
fuente
@Coulton ¿Qué pasa con Safari y Chrome?
QMaster
Según esto , funciona en Safari y sé que funciona en Chrome.
Lucas
3
Vale la pena mencionar que aún puede desplazarse en el div usando tab, siempre que haya enlaces o elementos de entrada en el desbordamiento oculto
William Brochmann
40

Deberías usar solo

overflow-y:hidden; - Use esto para ocultar el desplazamiento vertical

overflow-x:auto; - Use esto para mostrar el desplazamiento horizontal

Luke ha mencionado como ambos ocultos. así que he dado esto por separado.

Siva Charan
fuente
21

desbordamiento: automático;
overflow-y: oculto;

Para IE8: -ms-overflow-y: hidden;

Si no :

Para ocultar X :

<div style="height:150x; width:450px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"></div>

Para ocultar Y :

<div style="height:150px; width:450px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"></div>
Chico al azar
fuente
8

Si desea lograr lo mismo en Gecko (NS6 +, Mozilla, etc.) e IE4 + simultáneamente, creo que esto debería funcionar: V

body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;
}

Esto se aplicará a la etiqueta de cuerpo completo, actualícela a su CSS relevante y aplique estas propiedades.

Nirav Mehta
fuente
2

Agregue lo siguiente:

body{
overflow-y:hidden;
}
Zeinab
fuente
1

Estas reglas son compatibles con todos los navegadores:

body {overflow: hidden; }
body::-webkit-scrollbar { width: 0 !important; }
body { overflow: -moz-scrollbars-none; }
body { -ms-overflow-style: none; }
tamueka
fuente
1

¿Qué tal una notación taquigráfica?

{overflow: auto hidden;}
Chong Lip Phang
fuente
0

Si desea deshabilitar la barra de desplazamiento, pero aún puede desplazar el contenido del DIV interno, use el siguiente código en css,

.divHideScroll::-webkit-scrollbar {
    width: 0 !important
}
.divHideScroll {
    overflow: -moz-scrollbars-none;
}
.divHideScroll {
    -ms-overflow-style: none;
}

divHideScroll es el nombre de clase del div de destino.

Funcionará en todos los navegadores principales (Chrome, Safari, Mozilla, Opera e IE)

Tahir Alvi
fuente