Overflow-x: hidden n'empêche pas le contenu de déborder dans les navigateurs mobiles
j'ai un site web ici .
visualisée dans un navigateur de bureau, la barre de menu noire ne s'étend correctement qu'au bord de la fenêtre, puisque le body a overflow-x:hidden .
dans n'importe quel navigateur mobile, que ce soit Android ou iOS, la barre de menu noire affiche sa pleine largeur, ce qui apporte des espaces sur la droite de la page. Pour autant que je sache, cet espace blanc ne fait même pas partie des étiquettes html ou body .
même si je règle le viewport à une largeur spécifique dans le <head> :
<meta name="viewport" content="width=1100, initial-scale=1">
le site s'étend à la 1100px mais a encore l'espace blanc au-delà de la 1100.
Qu'est-ce que je rate? Comment puis-je garder le viewport à 1100 et couper le débordement?
15 réponses
la création d'une div wrapper de site à l'intérieur du body et l'application du overflow-x:hidden à la wrapper au lieu du body ou html a corrigé le problème.
il semble que les navigateurs qui analysent l'étiquette <meta name="viewport"> ignorent simplement les attributs overflow sur les étiquettes html et body .
Vainqueurs 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 j'ajouterai un tantinet à son utilité.
Victor notes d'ajouter position:fixed .
body.modal-open {
overflow: hidden;
position: fixed;
}
et en effet il le fait. Cependant, il a également un léger effet secondaire de défiler essentiellement vers le haut. position:absolute résout ce mais, réintroduit la possibilité de défiler sur les mobiles.
si vous connaissez votre viewport ( mon plugin pour ajouter viewport au <body> ) vous pouvez juste ajouter un bouton css 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'ajoute également ceci pour empêcher la page sous-jacente de sauter gauche/droite lors de l'affichage/cacher des modaux.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
essayer
html, body {
overflow-x:hidden
}
au lieu de juste
body {
overflow-x:hidden
}
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
travaille sur iOS9
comme L'indique @Indigenuity, cela semble être dû à l'analyse par les navigateurs de la balise <meta name="viewport"> .
Pour résoudre ce problème à la source, essayez ce qui suit:
<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.
c'est la solution la plus simple pour résoudre le défilement horisontal en Safari.
html, body {
position:relative;
overflow-x:hidden;
}
aucune solution unique précédente n'a fonctionné pour moi, j'ai dû les mélanger et j'ai fait corriger le problème également sur les appareils plus anciens (iphone 3).
D'abord, je devais envelopper le contenu html dans une div externe:
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
puis j'ai dû appliquer le débordement caché à l'emballage, parce que le débordement-x ne fonctionnait pas:
#wrapper {
overflow: hidden;
}
et cela a réglé le problème.
garder le viewport intact: <meta name="viewport" content="width=device-width, initial-scale=1.0">
en supposant que vous souhaitez obtenir l'effet d'une barre noire continue sur le côté droit: #menubar ne devrait pas dépasser 100% , ajuster le rayon de bordure de sorte que le côté droit est carré et ajuster le rembourrage de sorte qu'il s'étend un peu plus à droite. Modifier ce qui suit pour 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*/
ajustant le padding à 10px bien sûr laisse le menu de gauche au bord de la barre, vous pouvez mettre le restant 40px à chacun des li , 20px de chaque côté gauche et droite:
.menuitem {
display: block;
padding: 0px 20px;
}
lorsque vous redimensionnez le navigateur plus petit, vous trouverez toujours le fond blanc: placez votre texture d'arrière-plan à la place de votre div à body . Ou bien, réglez la largeur du menu de navigation de 100% à une valeur plus basse en utilisant les media queries. Il y a beaucoup d'ajustements à faire à 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 va d'une façon ou d'une autre corriger votre barre débordante.
Ajouter un wrapper <div> autour de l'intégralité de votre contenu fonctionnera effectivement. Tandis que sémantiquement "icky", j'ai ajouté un div avec une classe de overflowWrap à l'intérieur de la balise body et puis j'ai mis mon CSS comme ceci:
html, body, .overflowWrap {
overflow-x: hidden;
}
est peut-être exagéré maintenant, mais ça marche comme un charme!
j'ai rencontré le même problème avec les appareils Android mais pas les appareils iOS. Réussi à résoudre en spécifiant la position: relative dans la div externe des éléments absolument positionnés (avec débordement: caché pour la div externe)
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;
}
}
la structure est la suivante
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
comme dit subarachnid overflow-x caché pour le corps et html travaillé Voici l'exemple de travail
**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;
}
création d'un site wrapper div à l'intérieur du corps et l'application du débordement->x:caché sur le wrapper au lieu du corps ou html a corrigé le problème.
cela a fonctionné pour moi après avoir également ajouté position: relative à l'emballage.
la seule façon de corriger ce problème pour mon bootstrap modal (contenant un formulaire) était d'ajouter le code suivant à mon CSS:
.modal {
-webkit-overflow-scrolling: auto!important;
}
je travaille là-dessus depuis quelques heures, essayant différentes combinaisons de choses à partir de cette page et d'autres. La chose qui a fonctionné pour moi à la fin était de faire une div de site wrapper, comme suggéré dans la réponse acceptée, mais de mettre les deux débordements à Caché au lieu de juste le débordement de x. Si je laisse débordement-y à scroll, je finis avec une page qui ne défile verticalement que de quelques pixels et puis s'arrête.
#all-wrapper {
overflow: hidden;
}
C'était juste assez, sans réglage n'importe quoi sur le corps ou les éléments html.