Overflow-x: oculto no evita que el contenido se desborde en los navegadores móviles

142

Tengo un sitio web aquí .

Visto en un navegador de escritorio, la barra de menú negra se extiende correctamente solo hasta el borde de la ventana, ya que bodytiene 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 es parte de las etiquetas htmlo 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 hasta los 1100 px 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 a 1100 y corte el desbordamiento?

css overflow viewport mobile-browser Indigenidad
fuente
1
Esto es especialmente un problema en iOS9
Chuck Le Butt

Respuestas:

269

La creación de un div de contenedor del sitio dentro <body>y la aplicación overflow-x:hiddendel contenedor en lugar del <body>o <html>solucionó el problema.

Parece que los navegadores que analizan la <meta name="viewport">etiqueta simplemente ignoran los overflowatributos en las etiquetas htmly body.

Nota: También es posible que deba agregar position: relativeal contenedor div.

Indigenidad
fuente
44
Descubrí que, además de configurar el overflowa hidden, tenía que configurar el positiona fixed...
Victor S
16
Agregar posición a fijo me impide poder desplazarme.
teorizar
55
Lo intenté, puse todo mi código dentro de un div y le di overflow-x: oculto pero no funciona, agregué <meta name = "viewport" content = "width = device-width, initial-scale = 1"> también pero nada cambió: / alguna idea?
44
@leepowers overflow-x: hiddentodavía no funciona para mí incluso después de agregar esta metaetiqueta. ¿Podría por favor compartir un enlace a su sitio web donde funciona?
jupiteror
3
Hola pandilla, cuando descubrí que eso también position:relativefunciona.
Thomas Valadez
80

tratar

html, body {
  overflow-x:hidden 
}

en lugar de solo

body {
  overflow-x:hidden 
}
subaracárido
fuente
77
Gracias, pero la aplicación de overflowcualquier cosa htmly / o bodycualquier combinación no resolvió el problema.
Indigenuidad
Lamento que no te haya funcionado. Antes de responder, hice una prueba rápida usando su sitio y aplicando mi sugerencia a su CSS. Solucionó el problema para el navegador estándar y Dolphin en mi teléfono Android al menos.
subabarachnid
3
Trabajó para mi. eduardd.eu/projects/ezo (entre 480 y 992px el pie de página tenía un problema con esa imagen desbordante de la mujer y las toallas)
Eduard
2
¿Alguien sabe por qué esto funciona, cuando no se especifica el cuerpo {} y html {} por separado?
hamncheez
1
También es necesario agregar height:100%;, de lo contrario, el desplazamiento vertical no funcionaría correctamente en páginas con imágenes de carga (lo que hace que la página crezca en altura).
Arno van Oordt
69

El comentario de VictorS sobre la respuesta aceptada merece ser su propia respuesta porque es una solución muy elegante que realmente funciona. Y agregaré un poco a su utilidad.

Victor nota que agrega position:fixedobras.

body.modal-open {
    overflow: hidden;
    position: fixed;
}

Y de hecho lo hace. Sin embargo, también tiene un ligero efecto secundario de desplazarse esencialmente hacia la parte superior. position:absoluteresuelve esto, pero reintroduce la capacidad de desplazarse en el móvil.

Si conoce su ventana gráfica ( mi complemento para agregar la ventana gráfica a<body> ) puede simplemente agregar una palanca CSS para 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;
}
Puntilla
fuente
2
¿Hay alguna forma de hacer que la parte móvil no salte a la cima?
WraithKenny
1
Lo que funcionó para mí fue convertir el elemento que se suponía que estaba oculto por el desbordamiento de la posición: absoluto a la posición: fijo. Agradecidamente.
Chuck Le Butt
1
@WraithKenny: si desea que la página evite saltar a la cima en un dispositivo móvil, puede usar el siguiente enfoque hack'ish / feo. Dentro de su función modal, asegúrese de obtener el desplazamiento de desplazamiento actual antes de hacer cualquier cosa, luego aplique el estilo modal juntos y también establezca el margen superior de su cuerpo igual al menos del desplazamiento actual. Cuando elimine el modal, asegúrese de volver a establecer el margen en 0 y volver a desplazar la página al desplazamiento original.
Emil Borconi
2
Esta solución solo funciona en caso de que el contenido de su modal se ajuste a la pantalla, es decir, no necesita desplazarse por el modal.
Tobias
También hay otros elementos posicionados fijos y absolutos en mi página. Haciendo que el cuerpo position:fixed or absoluteperturbe sus posiciones también. No adecuado / trabajando en mi caso :(
sohaiby
31

Esta es la solución más simple para resolver el desplazamiento horizontal en Safari.

html, body {
  position:relative;
  overflow-x:hidden;
}
Waltur Buerk
fuente
1
Parece funcionar. ¿Pero tienes una explicación de por qué esto funciona?
LarS
No, finalmente no funcionó. Terminé haciendo los cálculos y me aseguré de que los div no sean más anchos de lo permitido, css calc () me ayudó mucho aquí ya que permite la mezcla de anchos relativos (vw o%) y anchos absolutos (px).
LarS
Por supuesto, esto es una solución alternativa. Todavía hay algo desbordando en alguna parte, ahora está cortado. Intente agregar una regla css: * {outline: 1px solid red; } Si aún no puede encontrar el elemento que se desborda, probablemente sea causado por un margen en alguna parte. Intente agregar * {margin: 0! IMPORTANTE; } y ver si desaparece el desbordamiento.
Waltur Buerk
Funciona para mi. Es interesante que el elemento oculto cambie el ancho del cuerpo. Para mí, sin embargo, este es el caso de TODOS los navegadores Safari, no solo los móviles. Solo tenía que arreglar un Bootstrap 4 table-responsiveBug. Esta fue la solución.
CunningFatalist
2
No puedo creer que esto siga siendo un problema en 2019. Pero la solución anterior funcionó totalmente. Gracias.
staxim
28

Como dice @Indigenuity, esto parece ser causado por navegadores que analizan la <meta name="viewport">etiqueta.

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, también evita el desplazamiento / desplazamiento hacia él.

Tempurturtul
fuente
Agregar initial-scale=1a una metaetiqueta de vista existente realmente soluciona el problema. ¡Gracias!
JamesWilson
66
Para mí fue lo minimum-scale=1que lo arregló
jpenna
Esto es lo que realmente funcionó para mí después de probar todo lo demás. Muchas gracias !
Harsh Limaye
16 
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

funciona en iOS9

ollio
fuente
3
Funciona, pero poner posición: fijado a tu cuerpo te hace desplazarte hacia arriba
ThaoD5
1
Extraño pero funcionó para mí sin posición fija, también. ¡Solo una de todas las soluciones aquí!
Garavani
Solo uno que funcionó para mí, usando chrom y boostrap + angularJS
kiwicomb123
6

Mantenga la ventana gráfica intacta: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Suponiendo que le gustaría lograr el efecto de una barra negra continua en el lado derecho: #menubarno debe exceder el 100% , ajuste el radio del borde de manera que el lado derecho esté al cuadrado y ajuste el relleno para que se extienda un poco más hacia la derecha . 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 paddinga 10px, por supuesto, deja el menú izquierdo al borde de la barra, puede colocar los 40px restantes a cada uno de los li, 20px en cada lado izquierdo y derecho:

.menuitem {
display: block;
padding: 0px 20px;
}

Cuando cambie el tamaño del navegador más pequeño, aún encontrará el fondo blanco: coloque la textura de fondo en lugar de su div a body. O, como alternativa, ajuste el ancho del menú de navegación del 100% al valor más bajo mediante consultas multimedia. Se deben realizar muchos ajustes en su código para crear un diseño adecuado, no estoy seguro de qué piensa hacer, pero el código anterior solucionará de alguna manera su barra desbordante.

Ana
fuente
si lo usa box-sizing: border-box;, puede agregar relleno a una división de 100% de ancho.
Charles John Thompson III
6

La creación de un contenedor de sitio dividido dentro del cuerpo y aplicando el desbordamiento-> x: oculto al contenedor EN LUGAR del cuerpo o html solucionó el problema.

Esto funcionó para mí después de agregar también position: relativeal contenedor.

Isaac F
fuente
Esto funcionó para mí. El efecto secundario fue que tengo dos barras de desplazamiento en lugar de una. La solución fue hacerlo en overflow: hiddenlugar de overflow-x: hidden. Funciona en dispositivos móviles Safari, Chrome, IE11 en OSX y Win.
pop
4

Agregar un contenedor <div>alrededor de la totalidad de su contenido funcionará. Mientras semánticamente "icky", agregué un div con una clase de overflowWrap justo dentro de la bodyetiqueta y luego establecí configurar mi CSS de esta manera:

html, body, .overflowWrap {
overflow-x: hidden;
}

¡Puede ser excesivo ahora, pero funciona como un encanto!

MBurnette
fuente
4

Encontré el mismo problema con los dispositivos Android pero no con los dispositivos iOS. Gestionado para resolver especificando posición: relativo en el div externo de los elementos posicionados absolutamente (con desbordamiento: oculto para div externo)

Kwok Pan Fung
fuente
4

Ninguna solución única anterior funcionó para mí, 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 un desbordamiento oculto al contenedor, porque overflow-x no funcionaba:

  #wrapper {
    overflow: hidden;
  }

y esto solucionó el problema.

spaghetticode
fuente
¿Cómo es esto diferente a la respuesta de @ Indigenuity?
Ian Kemp
3
@ian Kemp overflow: hidden! = overflow-x: hidden
spaghetticode
3

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

vikas etagi
fuente
3

Como dijo subarachnid, overflow-x oculto para el cuerpo y html funcionó 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;
}

Enlace

Skylin R
fuente
1

Llevo unas horas trabajando en esto, probando varias combinaciones de cosas de esta y otras páginas. Al final, lo que funcionó para mí fue hacer un div de envoltorio de sitio, como se sugiere en la respuesta aceptada, pero establecer ambos desbordamientos en ocultos en lugar de solo el desbordamiento x. Si dejo el desbordamiento-y en el desplazamiento, termino con una página que solo se desplaza verticalmente unos pocos píxeles y luego se detiene.

#all-wrapper {
  overflow: hidden;
}

Solo esto fue suficiente, sin establecer nada en el cuerpo o elementos html.

compañero
fuente
1

Intenté muchas formas a partir de las respuestas en este tema, la mayoría funciona, pero obtuve algunos efectos secundarios, como si uso overflow-x body,html, podría ralentizar / congelar la página cuando los usuarios se desplazan hacia abajo en el móvil.

el uso position: fixeden wrapper / div dentro del cuerpo también es bueno, pero cuando tengo un menú y uso Javascript, haga clic en el desplazamiento animado a alguna sección, no funciona.

Entonces, decidí usar touch-action: pan-y pinch-zoomen wrapper / div dentro del cuerpo. Problema resuelto.

Jirayu L
fuente
0

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;
}
Tobias
fuente