Overflow-x:hidden n'empêche pas le contenu de déborder dans les navigateurs mobiles

J'ai un site web ici.

Visualisé dans un navigateur de bureau, le noir de la barre de menu correctement s'étend seulement sur le bord de la fenêtre, depuis le body a overflow-x:hidden.

Dans tout navigateur mobile, que ce soit sur Android ou iOS, le noir de la barre de menu affiche sa pleine largeur, qui apporte de l'espace sur la droite de la page. Aussi loin que je peux dire, cet espace n'est même pas une partie de la html ou body balises.

Même si j'ai mis de la fenêtre d'une largeur spécifique dans le <head>:

<meta name="viewport" content="width=1100, initial-scale=1">

Le site s'étend vers l'1100px mais a encore de l'espace au-delà de la 1100.

Ce qui me manque? Comment puis-je garder la fenêtre d'affichage à 1100 et couper le débordement?

Ceci est particulièrement un problème dans iOS9

InformationsquelleAutor Indigenuity | 2013-01-11

224

La création d'un site wrapper div à l'intérieur de la body et de l'application de la overflow-x:hidden à l'emballage, au LIEU de la body ou html résolu le problème.

Il semble que les navigateurs qui parse le <meta name="viewport"> balise simplement ignorer overflow attributs sur la html et body balises.
- J'ai trouvé qu'en plus d'être le overflow à hidden, j'ai dû mettre le position à fixed...
- Pour moi, juste l'ajout de overflow-x: hidden pour la première div à l'intérieur de body a très bien fonctionné. Pas besoin d'ajouter un autre div, juste essayer de mettre à votre ultrapériphériques div.
- L'ajout de position fixe m'arrête d'être capable de faire défiler!
- L'ajout d'une enveloppe de div avec overflow: hidden a fait le tour pour moi dans iOS7!
- J'ai essayé, j'ai mis tout mon code à l'intérieur d'un div et de lui donner overflow-x:hidden, mais se complique pas de travail, j'ajoute <meta name="viewport" content="width=device-width, initial-scale=1"> trop mais rien n'a changé :/ des idées?
- Faire un div wrapper autour de tout ce qui, dans <body> fonctionne.
- Ne fonctionnait pas pour moi sur MobileSafari (iOS9) jusqu'à ce que je me suis assuré de la fenêtre d'affichage de la balise meta ressemblait à ceci: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> - question ici: le changement de contenu du conteneur peut provoquer un grand changement dans la hauteur, qui à son tour peut provoquer bizarre le comportement de zoom.
- caché ne fonctionne toujours pas pour moi, même après que j'ai ajouter cette balise meta. Pourriez-vous s'il vous plaît partager un lien vers votre site web, où il travaille?
- overflow: hidden; height: 100%; ensemble fonctionne pour moi
- Certainement ^ si vous trouvez un élément en dehors de cette région, assurez-vous qu'il n'est pas absolu, mais plutôt en mode fixe.
- rien n'a fonctionné, mais le position: fixed. merci <33
- Hey gang, quand j'ai découvert que position:relative fonctionne aussi bien.
InformationsquelleAutor Indigenuity
68

essayer
```
html, body {
  overflow-x:hidden 
} 
```
au lieu de simplement
```
body {
  overflow-x:hidden 
}
```
- Merci, mais l'application de overflow rien à html et/ou body dans n'importe quelle combinaison n'a pas résolu le problème.
- Désolé que ça n'a pas fonctionné pour vous. Avant que j'ai répondu, j'ai fait un test rapide à l'aide de votre site et de l'application de ma suggestion de votre css. Il a résolu le problème de la norme et de dolphin browser sur mon téléphone android à moins.
- Par curiosité, que pensez-vous utiliser pour modifier le css sur votre mobile les navigateurs?
- Je ne sais pas si c'est possible. Je suis également à la recherche d'un navigateur mobile avec une sorte de développeur de plugin 🙂 Dans votre cas, je viens de télécharger une partie du site pour effectuer les modifications en local sur mon pc, puis de le charger sur mon serveur - très ennuyeux solution de contournement 😉
- A travaillé pour moi. eduardd.ue/projets/ezo ( entre 480 et 992px pied de page avait un problème avec ça déborde de l'image de la femme et de serviettes de toilette )
- Personne ne sait pourquoi cela fonctionne, lors de la spécification de body{} et html{} séparément ne marche pas?
InformationsquelleAutor subarachnid
67

Vainqueurs's commentaire sur le accepté de répondre à mérite d'être sa propre réponse, car elle est très élégante, une solution qui ne, fait le travail. Et je vais ajouter un peu à son utilité.

Victor notes ajoutant position:fixed œuvres.
```
body.modal-open {
    overflow: hidden;
    position: fixed;
}
```
Et en effet il ne. Cependant, il a aussi un léger côté l'influence de essentiellement de défilement vers le haut. position:absolute résout ce mais, ré-introduit la possibilité de faire défiler sur mobile.

Si vous savez que votre fenêtre d'affichage ( mon plugin pour ajouter de la fenêtre d'affichage pour le <body> ), vous pouvez simplement ajouter un css à bascule pour le 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; 
}
```
J'ai aussi ajouter à prévenir la page sous-jacente de sauter à gauche/à droite lors de l'affichage/masquage des auxiliaires modaux.
```
body {
    //STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}
```
- Est-il de toute façon à obtenir la partie mobile de ne pas sauter de haut?
- Ce qui a fonctionné pour moi a été de tourner l'élément qui est censé être caché par un débordement de la position: absolute position: fixed. Heureusement.
- Si vous souhaitez que la page pour éviter de sauter vers le haut sur un appareil mobile, vous pouvez utiliser ce hack new'ish/laid approche. À l'intérieur de votre modal de la fonction, assurez-vous que vous obtenez le courant de défilement de décalage avant de faire quoi que ce soit, que s'applique la modale de style et aussi de définir la marge supérieure de votre corps égale à la borne du décalage actuel. Assurez-vous que lorsque vous retirez le modal vous, définissez la marge à 0 et faire défiler la page vers le décalage d'origine.
- Cette solution ne fonctionne que dans le cas où votre modale du contenu s'adapte à l'écran, c'est à dire vous n'avez pas besoin de faire défiler la modale de lui-même.
- Il y a d'autres fixes et les éléments en position absolue sur ma page. Organe de prise de position:fixed or absolute perturber leurs positions. Ne convient pas de travail dans mon cas 🙁
- Je pense que cela répond à une autre question que je voulais poser, mais il répond bien. Je n'avais pas prévu la question à propos des modaux, mais plutôt à propos de n'importe quel élément d'une page de débordement. Donc position:fixed ne convient pas à beaucoup de ces éléments. La question d'origine n'a pas vraiment préciser que si, donc je pense toujours que cette réponse est très utile.
InformationsquelleAutor Brad
21

C'est la solution la plus simple pour résoudre horizontale de défilement dans Safari.
```
html, body {
  position:relative;
  overflow-x:hidden;
}
```
- Il semble fonctionner. Mais avez-vous une explication pourquoi cela fonctionne?
- Non, finalement il n'a pas de travail. J'ai fini de faire le calcul et fait en sorte que les div ne sont pas plus large que celui autorisé, css calc() m'a aidé ici beaucoup car il permet le mélange de la largeur relative (vw ou %) et absolue largeurs (px).
- Bien sûr, c'est quelque chose d'une solution de contournement. Il y a toujours quelque chose débordant quelque part, c'est juste couper maintenant. Essayez d'ajouter une règle css: * { outline: 1px solid red; } Si vous ne trouvez toujours pas le débordement de l'élément, alors il est probablement causée par une marge de quelque part. Essayez d'ajouter * { margin:0 !IMPORTANT; } et voir si le débordement disparaît.
- Fonctionne pour moi. Intéressant de noter que l'élément masqué les changements du corps de la largeur. Pour moi, cependant, c'est le cas pour TOUS les navigateurs Safari, pas seulement les téléphones mobiles. Juste eu à résoudre un Bootstrap 4 table-responsive Bug. C'était la solution.
- Je ne suis pas sûr de ce que le gars qui a dit que cela ne fonctionne pas a faire de mal (peut-être de ne pas actualiser son cache). Cette solution ne fait absolument travailler.
- C'est la seule chose qui m'a aidé à masquer un élément en position absolue qui l'anime à l'écran
- Je ne peux pas croire que c'est encore un problème en 2019. Mais la solution ci-dessus a totalement fonctionné. Thx.
InformationsquelleAutor Waltur Buerk
16
```
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
```
fonctionne sur iOS9
- Il fonctionne, mais en mettant en position:fixed pour votre corps, ne vous faites défiler vers le haut
- Bizarre, mais cela a fonctionné pour moi, sans position fixe, aussi. Seule de toutes les solutions ici!
- Un seul qui a fonctionné pour moi, à l'aide de chrome et de bootstrap + angularJS
InformationsquelleAutor ollio
16

Comme @Autochtones des états, ce qui semble être causé par les navigateurs de l'analyse du <meta name="viewport"> tag.

Pour résoudre ce problème à la source, essayez les solutions suivantes:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.

Dans mes tests, cela évite à l'utilisateur de zoomer pour voir le débordait de contenu, et par conséquent empêche de panoramique/défilement à elle aussi.
- L'ajout de initial-scale=1 à une balise meta viewport en effet de résoudre le problème. Merci!
- Pour moi, c'était la minimum-scale=1 qu'il fixe
InformationsquelleAutor Tempurturtul
5

Sans précédent seule solution a fonctionné pour moi, j'ai dû mélanger et a obtenu le numéro fixe également sur les anciens appareils (iphone 3).

Tout d'abord, j'ai dû l'envelopper le code html contenu dans une div extérieure:
```
<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>
```
Ensuite, j'ai dû appliquer débordement caché à l'emballage, car overflow-x n'a pas de travail:
```
  #wrapper {
    overflow: hidden;
  }
```
et cela a réglé le problème.
- Comment est-ce différent pour @Autochtones de la réponse?
- Kemp overflow: hidden != overflow-x: hidden
- J'ai essayé, mais n'a pas été capable de faire défiler plus.
InformationsquelleAutor spaghetticode
5

La création d'un site wrapper div à l'intérieur du corps et de l'application de l'overflow->x:hidden pour l'emballage au LIEU de l'organisme ou de l'html résolu le problème.

Cela a fonctionné pour moi, après l'ajout de position: relative de l'emballage.
- Cela a fonctionné pour moi. L'effet secondaire est que j'ai deux barres de défilement au lieu d'un. La solution a été de faire overflow: hidden au lieu de overflow-x: hidden. Fonctionne sur mobile Safari, Chrome, IE11 sur OSX et Gagner.
InformationsquelleAutor Isaac F
4

Garder la fenêtre intacte: <meta name="viewport" content="width=device-width, initial-scale=1.0">

En supposant que vous souhaitez atteindre l'effet d'un continu barre noire sur le côté droit: #menubar ne devrait pas dépasser 100%, ajuster la rayon des frontières tels que le côté droit est carré et d'ajuster le rembourrage de sorte qu'il s'étend sur un peu plus à droite. Modifier les lignes suivantes à votre #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*/
```
Réglage de la padding de 10px de cours quitte le menu de gauche sur le bord de la barre, vous pouvez mettre le reste de la 40px à chacun des li, 20px sur chaque côté, à gauche et à droite:
```
.menuitem {
display: block;
padding: 0px 20px;
}
```
Lorsque vous redimensionnez le navigateur plus petits, vous trouverez toujours le fond blanc: placez votre texture d'arrière-plan au lieu de votre div body. Ou sinon, réglez le menu de navigation, d'une largeur de 100% à une valeur inférieure à l'aide de requêtes de média. Il y a beaucoup de réglages à effectuer pour que votre code pour créer une mise en page correcte, je ne suis pas sûr de ce que vous avez l'intention de faire, mais le code ci-dessus en quelque sorte réparer votre débordant bar.
- si vous utilisez box-sizing: border-box; vous pouvez ajouter le remplissage à 100% de la largeur de la div.
InformationsquelleAutor Anne
4

L'ajout d'un wrapper <div> autour de l'intégralité de votre contenu sera fait le travail. Alors que du point de vue sémantique "dégueulasse", j'ai ajouté un div avec une classe de overflowWrap droit à l'intérieur de la body tag puis définir mon CSS comme ceci:
```
html, body, .overflowWrap {
overflow-x: hidden;
}
```
Peut-être exagéré maintenant, mais fonctionne comme un charme!

InformationsquelleAutor MBurnette
4

J'ai rencontré le même problème avec les appareils Android, mais pas sur les périphériques iOS. Réussi à résoudre par la spécification de position:relative à la div extérieure des éléments en position absolue (avec overflow:hidden pour div extérieure)

InformationsquelleAutor Kwok Pan Fung
3

J'ai résolu le problème en utilisant overflow-x:hidden; comme suit
```
@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;
   }
 }
```
structure est comme suit

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

InformationsquelleAutor vikas etagi

Comme subarachnid dit overflow-x caché pour le corps et le html travaillé
Voici un exemple fonctionnel

**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;
}

Lien

InformationsquelleAutor Skylin R

1

Je viens de travailler sur ce pour quelques heures, en essayant diverses combinaisons de choses à partir de cela et d'autres pages. La chose qui a fonctionné pour moi à la fin était de faire un site wrapper div, comme suggéré dans l'acceptation de réponse, mais pour définir à la fois les débordements cachés au lieu de simplement le x de débordement. Si je laisse overflow-y à défiler, je me retrouve avec une page seulement défile verticalement par quelques pixels et puis s'arrête.
```
#all-wrapper {
overflow: hidden;
}
```
Juste ce fut assez, sans que quoi que ce soit sur le corps ou d'éléments html.

InformationsquelleAutor highfellow
0

La seule façon de résoudre ce problème pour mon bootstrap modal (contenant un formulaire) était d'ajouter le code suivant dans mon CSS:
```
.modal {
-webkit-overflow-scrolling: auto!important;
}
```
InformationsquelleAutor Tobias

Vous devez vous connecter pour publier un commentaire.