Deshabilitar desplazamiento en el cuerpo

137

Me gustaría deshabilitar completamente el desplazamiento en el HTML body. He probado las siguientes opciones:

overflow: hidden; (no funciona, no deshabilitó el desplazamiento, solo ocultó la barra de desplazamiento)
position: fixed; (esto funcionó, pero se desplazó completamente hasta la parte superior, lo que es inaceptable para esta aplicación específica)

No pude encontrar ninguna alternativa a estas dos opciones, ¿hay alguna más?

html css scroll

— Micha Wiedenmann
fuente

3

¿para qué elemento aplicó el desbordamiento: oculto?

— Sajad Karuthedath

¿Qué es exactamente lo que estás tratando de lograr aquí? ¿Cuál es tu objetivo final?

— jbutler483

2

Mostrar código relevante hará que sea más fácil ayudarte.

— Sleek Geek

1

desbordamiento: oculto; es el camino a seguir Si no funciona, tiene algún otro problema en su CSS. Pruebe html, body {overflow: hidden;} si esto no funciona, intente * {overflow: hidden;} e intente descubrir qué está mal

— Jonas Grumann

245

Conjunto heighty overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

— pantera
fuente

3

se olvidó de "HTML", antes de "cuerpo.

2

No funciona en iOS cuando tiene un elemento de superposición que tiene una posición fija.

— notQ

1

Simplemente puede agregar el "desbordamiento": "oculto" y funcionará bien.

— JPG

Esta solución no funcionó de inmediato para mí, pero después de la inspección, el "margen" se anulaba en alguna parte. Establecer el "margen: 0;" de ese elemento Hizo el truco.

— joaoprib

19

HTML CSS funciona bien si la etiqueta del cuerpo no hace nada, usted también puede escribir

<body scroll="no" style="overflow: hidden">

En este caso, la anulación debe estar en la etiqueta del cuerpo, es más fácil de controlar pero a veces da dolores de cabeza.

— Lalo
fuente

21

Esto no es válido HTML5

— mbomb007

@ mbomb007 ¿Puede comentar el error aquí relacionado con HTML5?

— Ethan

55

@Ethan El scrollatributo no es válido en la <body>etiqueta. No aparece como válido en ninguna especificación que pueda encontrar. w3schools ; MDN ; Quackit

— mbomb007

14

Esta publicación fue útil, pero solo quería compartir una ligera alternativa que puede ayudar a otros:

Configuración en max-heightlugar de heighttambién hace el truco. En mi caso, estoy deshabilitando el desplazamiento basado en un cambio de clase. Establecer .someContainer {height: 100%; overflow: hidden;}cuándo la altura del contenedor es menor que la de la ventana gráfica estiraría el contenedor, lo que no sería lo que desearía. Establecer max-heightcuentas para esto, pero si la altura del contenedor es mayor que la de la ventana gráfica cuando el contenido cambia, aún se desactiva el desplazamiento.

— joebjoe
fuente

Esto me salvó el día para los navegadores de escritorio sin el efecto secundario no deseado de scroll-top-top. pero no funcionó en navegadores móviles (iphone5s y android).

— bob

5

Para lograr esto, agregue 2 propiedades CSS en el <body>elemento.

body {
   height: 100%;
   overflow-y: hidden;
}

En estos días hay muchos sitios web de noticias que requieren que los usuarios creen una cuenta. Por lo general, otorgarán acceso completo a la página durante aproximadamente un segundo, y luego mostrarán una ventana emergente y evitarán que los usuarios se desplacen hacia abajo.

— bvdb
fuente

Esto oculta la barra de desplazamiento. Sin embargo, la pregunta es específicamente pedir una alternativa para ocultar la barra de desplazamiento

— DataGeek

@DataGeek, esto no solo oculta la barra de desplazamiento, sino que también detiene la capacidad de desplazarse hacia abajo. Y, según tengo entendido, eso es lo que se pidió. es decir, no solo ocultarlo, sino también hacer que sea imposible desplazarse hacia abajo.

— bvdb