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)?

— joedborg
fuente

Tenga en cuenta que margin-bottomcon un valor negativo se meterá con, overflow-y: hiddenetc.

— Andrew

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