css - truncar - Cuerpo configurado para desbordamiento-y: oculto, pero la página aún se puede desplazar en Chrome
truncar texto con puntos suspensivos (9)
Tengo un problema con la propiedad overflow-y en Chrome. Aunque lo he configurado como hidden , todavía puedo desplazar la página con la rueda del mouse.
Aquí está mi código:
html,
body {
overflow-y: hidden;
}
#content {
position: absolute;
width: 100%;
}
.step {
position: relative;
height: 500px;
margin-bottom: 500px;
}
<body>
<div id="content">
<div class="step">this is the 1st step</div>
<div class="step">this is the 2nd step</div>
<div class="step">this is the 3rd step</div>
</div>
</body>
¿Alguien sabe cómo bloquear el desplazamiento vertical en Chrome?
¡Gracias!
Averigüe el elemento que es más grande que el cuerpo (elemento que está causando que la página se desplace) y simplemente fije su posición en fijo. NOTA: No estoy hablando para cambiar la posición de los elementos que se pueden arrastrar. Los elementos que se pueden arrastrar se pueden arrastrar fuera del cuerpo solo cuando hay un elemento más grande que el cuerpo (mayormente de ancho).
Establecer una altura en tu cuerpo y html del 100% debería arreglarte. Sin una altura definida, su contenido no se desborda, por lo que no obtendrá el comportamiento deseado.
html, body {
overflow-y:hidden;
height:100%;
}
Finalmente encontré una manera de solucionar el problema, así que estoy respondiendo aquí.
#content el overflow-y en el #content y envolví mis pasos en otro div. Funciona.
Aquí está el código final:
<body>
<div id="content">
<div id="steps">
<div class="step">this is the 1st step</div>
<div class="step">this is the 2nd step</div>
<div class="step">this is the 3rd step</div>
</div>
</div>
</body>
#content {
position:absolute;
width:100%;
overflow-y:hidden;
top:0;
bottom:0;
}
.step {
position:relative;
height:500px;
margin-bottom:500px;
}
Intenta esto cuando quieras "arreglar" el desplazamiento de tu cuerpo:
jQuery(''body'').css(''height'', ''100vh'').css(''overflow-y'', ''hidden'');
y esto cuando quieras volverlo normal de nuevo:
jQuery(''body'').css(''height'', '''').css(''overflow-y'', '''');
La respuesta correcta es que debe configurar JUST body to overflow: hidden. Por cualquier motivo, si también configura html para desbordar: oculto, el resultado es el problema que ha descrito.
Lo que me funciona en / FF y / Chrome:
body {
position: fixed;
width: 100%;
height: 100%;
}
overflow: hidden simplemente deshabilita la visualización de las barras de desplazamiento. (Pero puedes ponerlo allí si quieres).
Hay un inconveniente que encontré: si utiliza este método en una página en la que solo desea detener el desplazamiento temporalmente, la position: fixed configuración position: fixed lo desplazará hacia la parte superior. Esto se debe a que position: fixed utiliza posiciones absolutas que actualmente están establecidas en 0/0.
Esto puede ser reparado, por ejemplo, con jQuery:
var lastTop;
function stopScrolling() {
lastTop = $(window).scrollTop();
$(''body'').addClass( ''noscroll'' )
.css( { top: -lastTop } )
;
}
function continueScrolling() {
$(''body'').removeClass( ''noscroll'' );
$(window).scrollTop( lastTop );
}
Otra solución que encontré para trabajar es establecer un controlador de rueda en el contenedor interior y asegurarme de que no se propague al establecer su último parámetro en falso y detener la burbuja de eventos.
document.getElementById(''content'').addEventListener(''mousewheel'',function(evt){evt.cancelBubble=true; if (evt.stopPropagation) evt.stopPropagation},false);
El desplazamiento funciona bien en el contenedor interno, pero el evento no se propaga al cuerpo y, por lo tanto, no se desplaza. Esto es además de configurar el desbordamiento de propiedades del cuerpo : oculto y alto: 100% .
Técnicamente, el tamaño de tu body y html son más anchos que la pantalla, por lo que tendrás que desplazarte. Tendrá que establecer el margin:0; y padding:0; para evitar el comportamiento de desplazamiento, y agregue algunos márgenes / relleno a #content en #content lugar.
Utilizar:
overflow: hidden;
height: 100%;
position: fixed;
width: 100%;