css - tricks - overflow-y scroll not working
Overflow-x: hidden no evita que el contenido se desborde en los navegadores móviles (16)
Tengo un sitio web here .
Vista en un navegador de escritorio, la barra de menú negro se extiende solo al borde de la ventana, ya que el body tiene overflow-x:hidden .
En cualquier navegador móvil, ya sea Android o iOS, la barra de menú negra muestra su ancho completo, lo que trae espacios en blanco a la derecha de la página. Por lo que puedo decir, este espacio en blanco ni siquiera forma parte de las etiquetas html o body .
Incluso si configuro la ventana gráfica a un ancho específico en <head> :
<meta name="viewport" content="width=1100, initial-scale=1">
El sitio se expande a 1100px pero aún tiene el espacio en blanco más allá de los 1100.
¿Qué me estoy perdiendo? ¿Cómo mantengo la ventana gráfica en 1100 y elimino el desbordamiento?
Crear un divisor de envoltura de sitio dentro del cuerpo y aplicar el desbordamiento-> x: oculto al envoltorio EN LUGAR del cuerpo o html resolvió el problema.
Esto funcionó para mí después de también agregar position: relative a la envoltura.
Agregar un wrapper <div> alrededor de la totalidad de tu contenido funcionará. Aunque semánticamente "asqueroso", agregué un div con una clase de overflowWrap justo dentro de la etiqueta body y luego configuré mi CSS así:
html, body, .overflowWrap {
overflow-x: hidden;
}
¡Podría ser exagerado ahora, pero funciona como un encanto!
Como dice @Indigenuity, esto parece ser causado por navegadores que analizan la etiqueta <meta name="viewport"> .
Para resolver este problema en la fuente, intente lo siguiente:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> .
En mis pruebas, esto evita que el usuario se aleje para ver el contenido desbordado y, como resultado, evita que se desplace / se desplace también hacia él.
Como dijo subarachnid overflow-x oculto para ambos cuerpo y html trabajado Aquí está el ejemplo de trabajo
**HTML**
<div class="contener">
<div class="menu">
das
</div>
<div class="hover">
<div class="img1">
First Strip
</div>
<div class="img2">
Second Strip
</div>
</div>
</div>
<div class="baner">
dsa
</div>
**CSS**
body, html{
overflow-x:hidden;
}
body{
margin:0;
}
.contener{
width:100vw;
}
.baner{
background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
width:100vw;
height:400px;
margin-left:0;
left:0;
}
.contener{
height:100px;
}
.menu{
display:flex;
background-color:teal;
height:100%;
justify-content:flex-end;
align:content:bottom;
}
.img1{
width:150px;
height:25px;
transform:rotate(45deg);
background-color:red;
position:absolute;
top:40px;
right:-50px;
line-height:25px;
padding:0 20px;
cursor:pointer;
color:white;
text-align:center;
transition:all 0.4s;
}
.img2{
width:190px;
text-align:center;
transform:rotate(45deg);
background-color:#333;
position:absolute;
height:25px;
line-height:25px;
top:55px;
right:-50px;
padding:0 20px;
cursor:pointer;
color:white;
transition:all 0.4s;
}
.hover{
overflow:hidden;
}
.hover:hover .img1{
background-color:#333;
transition:all 0.4s;
}
.hover:hover .img2{
background-color:blue;
transition:all 0.4s;
}
Crear un divisor de envoltura de sitio dentro del body y aplicar el overflow-x:hidden al envoltorio EN LUGAR del body o html resolvió el problema.
Parece que los navegadores que analizan la etiqueta <meta name="viewport"> simplemente ignoran los atributos de overflow en las etiquetas html y body .
El comentario de VictorS sobre la respuesta aceptada merece ser su propia respuesta porque es una solución muy elegante que funciona, de hecho, funciona. Y agregaré un poco a su utilidad.
Victor señala la position:fixed adición position:fixed trabajos position:fixed .
body.modal-open {
overflow: hidden;
position: fixed;
}
Y de hecho lo hace. Sin embargo, también tiene un ligero efecto secundario de desplazamiento esencialmente hacia la parte superior. position:absolute resuelve esto pero, vuelve a introducir la capacidad de desplazarse por el móvil.
Si conoce su ventana gráfica ( mi complemento para agregar ventana gráfica al <body> ), puede agregar un alternar CSS para la position .
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
También agrego esto para evitar que la página subyacente salte hacia la izquierda / derecha al mostrar / ocultar modales.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
Esta es la solución más simple para resolver el desplazamiento horisontal en Safari.
html, body {
position:relative;
overflow-x:hidden;
}
Hace unas horas que estoy trabajando en esto, probando varias combinaciones de cosas de esta y otras páginas. Lo que funcionó para mí al final fue crear un divisor de contenido de sitio, como se sugiere en la respuesta aceptada, pero para establecer ambos desbordamientos como ocultos en lugar de solo el desbordamiento de x. Si dejo overflow-y en scroll, termino con una página que solo se desplaza verticalmente unos pocos píxeles y luego se detiene.
#all-wrapper {
overflow: hidden;
}
Esto fue suficiente, sin establecer nada en el cuerpo o elementos html.
La única forma de solucionar este problema para mi modal de arranque (que contiene un formulario) era agregar el siguiente código a mi CSS:
.modal {
-webkit-overflow-scrolling: auto!important;
}
Mantener intacta la ventana gráfica: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Suponiendo que desea obtener el efecto de una barra negra continua en el lado derecho: #menubar no debe exceder el 100% , ajuste el radio del borde de modo que el lado derecho quede al cuadrado y ajuste el relleno para que se extienda un poco más a el derecho. Modifique lo siguiente a su #menubar :
border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/
Ajustando el padding a 10px por supuesto, deja el menú izquierdo al borde de la barra, puede poner los 40px restantes a cada uno de los li , 20px en cada lado a la izquierda y a la derecha:
.menuitem {
display: block;
padding: 0px 20px;
}
Cuando cambie el tamaño del navegador más pequeño, encontrará todavía el fondo blanco: coloque la textura de fondo en lugar de su div en el body . O, como alternativa, ajuste el ancho del menú de navegación del 100% al valor inferior mediante consultas de medios. Se deben realizar muchos ajustes en el código para crear un diseño adecuado, no estoy seguro de qué pretende hacer, pero el código anterior arreglará de alguna manera su barra desbordante.
Me encontré con el mismo problema con dispositivos Android pero no con dispositivos iOS. Gestionado para resolver especificando la posición: relativo en el div externo de los elementos absolutamente posicionados (con desbordamiento: oculto para el div externo)
Ninguna solución anterior me funcionó, tuve que mezclarlos y solucionó el problema también en dispositivos más antiguos (iPhone 3).
Primero, tuve que envolver el contenido html en un div externo:
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
Luego tuve que aplicar el desbordamiento oculto a la envoltura, porque overflow-x no funcionaba:
#wrapper {
overflow: hidden;
}
y esto solucionó el problema.
Resolví el problema usando overflow-x: hidden; como sigue
@media screen and (max-width: 441px){
#end_screen { (NOte:-the end_screen is the wrapper div for all other div''s inside it.)
overflow-x: hidden;
}
}
la estructura es la siguiente
1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.
''end_screen is the wrapper of end_screen_1 and end_screen_2 div''s
También parece haber un problema con tener el cuerpo y html configurados para mostrar: tabla ;. Cambiar su pantalla a bloque lo arregla.
tratar
html, body {
overflow-x:hidden
}
en lugar de simplemente
body {
overflow-x:hidden
}
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
funciona en iOS9