html - personalizar - ocultar scroll pero que funcione
¿Cómo evitar que la barra de desplazamiento reposicione la página web? (17)
Ampliando la respuesta usando esto:
body {
width: calc(100vw - 17px);
}
Un comentarista sugirió agregar margen izquierdo para mantener el centrado:
body {
padding-left: 17px;
width: calc(100vw - 17px);
}
Pero las cosas no se ven correctas si su contenido es más ancho que la ventana gráfica. Para solucionarlo, puede usar consultas de medios, como esta:
@media screen and (min-width: 1058px) {
body {
padding-left: 17px;
width: calc(100vw - 17px);
}
}
Donde el 1058px = ancho del contenido + 17 * 2
Esto permite que una barra de desplazamiento horizontal maneje el desbordamiento de x y mantiene el contenido centrado centrado cuando la ventana gráfica es lo suficientemente amplia como para contener su contenido de ancho fijo
Tengo un sitio web con DIV alineado al centro. Ahora, algunas páginas necesitan desplazamiento, otras no. Cuando me muevo de un tipo a otro, la apariencia de una barra de desplazamiento mueve la página unos pocos píxeles hacia un lado. ¿Hay alguna manera de evitar esto sin mostrar explícitamente las barras de desplazamiento en cada página?
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 .
Extendiéndose de la respuesta de Rapti , esto funcionará igual de bien, pero agrega más margen al lado derecho del body y lo oculta con margen html negativo, en lugar de agregar relleno extra que en realidad podría afectar el diseño de la página. De esta manera, no se cambia nada en la página real (en la mayoría de los casos), y el código sigue siendo funcional.
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}
He resuelto el problema en uno de mis sitios web al establecer explícitamente el ancho del cuerpo en javascript por el tamaño de la vista menos el ancho de la barra de desplazamiento. Utilizo 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";
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 el contenido llena toda la ventana gráfica.
Si intenta evitar esto con una consulta de medios, tendrá un momento de chasquido incómodo porque el margen no se reducirá progresivamente a medida que cambia el tamaño de la ventana.
Aquí hay una solución que lo soluciona y AFAIK no tiene inconvenientes:
En lugar de usar margin: auto para centrar tu contenido, usa esto:
body {
margin-left: calc(50vw - 500px);
}
Reemplace 500px con la mitad del ancho máximo de su contenido (por lo tanto, en este ejemplo, el ancho máximo del contenido es 1000px). El contenido permanecerá centrado y el margen disminuirá progresivamente hasta que el contenido ocupe la ventana gráfica.
Para evitar que el margen se vuelva negativo cuando la ventana gráfica es más pequeña que el ancho máximo, simplemente agregue una consulta de medios de la siguiente manera:
@media screen and (max-width:1000px) {
body {
margin-left: 0;
}
}
Et voilà!
No sé si esta es una publicación anterior, pero tuve el mismo problema y si quieres desplazarte verticalmente, debes intentar overflow-y:scroll
Para hacer que la barra de desplazamiento aparezca fuera del elemento div, impidiendo el reposicionamiento del contenido dentro del div.
Use un ancho estático y tengo mi posición div como absoluta. Funciona para mi.
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scoll;
}
Si cambia el tamaño o después de cargar algunos datos, está agregando la barra de desplazamiento, entonces puede intentar seguir, crear clases y aplicar esta clase.
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}
Siempre se muestra el desplazamiento, 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 gráfica (consulte este enlace para obtener una explicación)
calcula cal en css3
34px significa ancho de barra de desplazamiento doble (vea this para fijo o esto para calcular si no confía en tamaños fijos)
Solía tener ese problema, pero la manera más sencilla de solucionarlo es esto (esto funciona para mí):
en el tipo de archivo CSS:
body{overflow-y:scroll;}
así de simple! :)
Traté de corregir probablemente el mismo problema que causó la .modal-open twitter bootstrap aplicada al body . La solución html {overflow-y: scroll} no ayuda. Una posible solución que encontré es agregar {width: 100%; width: 100vw} {width: 100%; width: 100vw} al elemento html .
Tuve el mismo problema, pero acabo de tener una gran idea: ajustar el contenido de su elemento desplazable en un div y aplicar 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 ventana 100vw incluida 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 hacia la derecha.
Tenga en cuenta que esto solo funcionará si el elemento desplazable utiliza el ancho completo de la página, pero esto no debería ser un problema la mayor parte del tiempo, ya que solo existen algunos otros casos en los que se ha centrado el contenido desplazable.
Usé algunos jquery para resolver esto
$(''html'').css({
''overflow-y'': ''hidden''
});
$(document).ready(function(){
$(window).load(function() {
$(''html'').css({
''overflow-y'': ''''
});
});
});
Yo creo que no. Pero estilizar el body con overflow: scroll debería funcionar. Aunque pareces saber eso.
overflow-y: scroll es correcto, pero debes usarlo con la etiqueta html, no body o si no obtienes una barra de desplazamiento doble en IE 7
Entonces el css correcto sería:
html {
overflow-y: scroll;
}
@media screen and (min-width: 1024px){
body {
min-height: 700px
}
}
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}
Example . Haga clic en el botón "cambiar min-altura".
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: debería ocultarse con overflow-x: hidden .