¿Cómo evitar que la barra de desplazamiento reposicione la página web?
Tengo un sitio web con DIV alineado al centro. Ahora, algunas páginas necesitan desplazarse, otras no. Cuando me muevo de un tipo a otro, la apariencia de una barra de desplazamiento mueve la página unos píxeles hacia un lado. ¿Hay alguna manera de evitar esto sin mostrar explícitamente las barras de desplazamiento en cada página?
16 answers
Overflow-y: scroll es correcto, pero debes usarlo con la etiqueta html, no body o de lo contrario obtendrás una doble barra de desplazamiento en IE 7
Así que el css correcto sería:
html {
overflow-y: scroll;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-16 05:26:14
Creo que no. Pero el estilo body con overflow: scroll debería bastar. Parece que lo sabes.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-09-13 15:08:57
Tuve el mismo problema, pero tuve una gran idea:
Envuelva el contenido de su elemento desplazable en un div y aplique padding-left: calc(100vw - 100%);.
<body>
<div style="padding-left: calc(100vw - 100%);">
Some Content that is higher than the user's screen
</div>
</body>
El truco es que 100vw representa el 100% de la vista incluyendo la barra de desplazamiento. Si resta 100%, que es el espacio disponible sin la barra de desplazamiento, termina con el ancho de la barra de desplazamiento o 0 si no está presente. La creación de un relleno de ese ancho a la izquierda simulará una segunda barra de desplazamiento, desplazando el contenido centrado de nuevo a la derecho.
Tenga en cuenta que esto solo funcionará si el elemento desplazable utiliza todo el ancho de la página, pero esto no debería ser un problema la mayoría de las veces porque solo hay otros pocos casos en los que haya centrado el contenido desplazable.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-16 16:17:05
Con scroll siempre mostrándose, tal vez no sea bueno para el diseño.
Intenta limitar el ancho del cuerpo con css3
body {
width: calc(100vw - 34px);
}
vw es el ancho de la ventana (ver este enlace para alguna explicación) calc calcular en css3 34px significa ancho de barra de desplazamiento doble (ver this for fixed o this para calcular si no confías en tamaños fijos)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-16 05:22:53
No se si este es un post antiguo, pero tuve el mismo problema y si quieres desplazarte verticalmente solo deberías probar overflow-y:scroll
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}
Ejemplo. Haga clic en el botón "cambiar altura mínima".
Con calc(100vw - 100%) podemos calcular el ancho de la barra de desplazamiento (y si no se muestra, será 0). Idea: usando margen negativo-derecho, podemos aumentar el ancho de <html> a este ancho. Verá una barra de desplazamiento horizontal - debe ocultarse usando overflow-x: hidden.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-02 10:25:54
Si cambia de tamaño o después de cargar algunos datos está agregando la barra de desplazamiento, puede intentar seguir, crear clase y aplicar esta clase.
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-24 16:22:03
He resuelto el problema en uno de mis sitios web estableciendo explícitamente el ancho del cuerpo en javascript por el tamaño de la ventana menos el ancho de la barra de desplazamiento. Uso una función basada en jQuery documentada aquí para determinar el ancho de la barra de desplazamiento.
<body id="bodyid>
var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-11-09 12:34:44
Traté de solucionar probablemente el mismo problema que causó twitter bootstrap .modal-open clase aplicada a body. La solución html {overflow-y: scroll} no ayuda. Una posible solución que encontré es agregar {width: 100%; width: 100vw} al elemento html.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-09 09:23:00
Ampliando la respuesta usando esto:
body {
width: calc(100vw - 17px);
}
Un comentarista sugirió agregar relleno izquierdo también para mantener el centrado:
body {
padding-left: 17px;
width: calc(100vw - 17px);
}
Pero entonces las cosas no parecen correctas si tu contenido es más ancho que la ventana. Para solucionarlo, puedes usar media queries, como esta:
@media screen and (min-width: 1058px) {
body {
padding-left: 17px;
width: calc(100vw - 17px);
}
}
Donde el 1058px = ancho de contenido + 17 * 2
Esto permite que una barra de desplazamiento horizontal maneje el desbordamiento x y mantenga el contenido centrado centrado cuando la ventana es lo suficientemente ancha como para contener su contenido de ancho fijo
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-13 20:41:34
Extendiéndose fuera de La respuesta de Rapti, esto debería funcionar igual de bien, pero agrega más margen al lado derecho de body y lo oculta con un margen negativo html, en lugar de agregar relleno adicional que podría afectar el diseño de la página. De esta manera, nada se cambia en la página real (en la mayoría de los casos), y el código sigue funcionando.
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-01 23:53:48
Las soluciones publicadas usando calc(100vw - 100%) están en el camino correcto, pero hay un problema con esto: Siempre tendrá un margen a la izquierda del tamaño de la barra de desplazamiento, incluso si cambia el tamaño de la ventana para que el contenido llene toda la ventana.
Si intenta evitar esto con una consulta de medios, tendrá un momento de ajuste incómodo porque el margen no se reducirá progresivamente a medida que cambie el tamaño de la ventana.
Aquí está una solución que consigue alrededor de eso y AFAIK no tiene inconvenientes:
En lugar de usar margin: auto para centrar su contenido, use esto:
body {
margin-left: calc(50vw - 500px);
}
Reemplace 500px con la mitad del ancho máximo de su contenido (por lo que en este ejemplo el ancho máximo del contenido es 1000px). El contenido ahora permanecerá centrado y el margen disminuirá progresivamente hasta que el contenido llene la ventana.
Para evitar que el margen se vuelva negativo cuando el viewport es más pequeño que el ancho máximo, simplemente agregue una consulta de medios como entonces:
@media screen and (max-width:1000px) {
body {
margin-left: 0;
}
}
Et voilà!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-13 12:51:23
Solía tener ese problema, pero la manera sencilla de solucionarlo es esta (esto funciona para mí):
En el tipo de archivo CSS:
body{overflow-y:scroll;}
Así de simple! :)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-06 21:49:49
Contrariamente a la respuesta aceptada que sugiere una barra de desplazamiento permanente en la ventana del navegador incluso si el contenido no se desborda en la pantalla , preferiría usar:
html{
height:101%;
}
Esto se debe a que la apariencia de la barra de desplazamiento tiene más sentido si el contenido realmente se desborda.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-29 11:25:47
Usé algo de jquery para resolver esto
$('html').css({
'overflow-y': 'hidden'
});
$(document).ready(function(){
$(window).load(function() {
$('html').css({
'overflow-y': ''
});
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-13 20:01:13
@media screen and (min-width: 1024px){
body {
min-height: 700px
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-31 22:13:10