Overflow-x: hidden n'empêche pas le contenu de déborder dans les navigateurs mobiles
J'ai un site web ici .
Vue dans un navigateur de bureau, la barre de menus noire s'étend correctement uniquement au bord de la fenêtre, puisque la body a overflow-x:hidden.
Dans n'importe quel navigateur mobile, qu'il s'agisse d'Android ou d'IOS, la barre de menus noire affiche toute sa largeur, ce qui laisse des espaces à droite de la page. Autant que je sache, cet espace ne fait même pas partie des balises html ou body.
Même si je règle la fenêtre d'affichage sur une largeur spécifique dans le <head>:
<meta name="viewport" content="width=1100, initial-scale=1">
Le site s’étend jusqu’à 1100px mais l’espace est toujours au-delà de 1100.
Qu'est-ce que je rate? Comment garder la fenêtre d'affichage à 1100 et couper le débordement?
Créer une div de wrapper de site dans la variable body et appliquer le overflow-x:hidden au wrapper INSTEAD de la variable body ou html a résolu le problème.
Il semble que les navigateurs qui analysent la balise <meta name="viewport"> ignorent simplement les attributs overflow des balises html et body.
Le commentaire de VictorS sur la réponse acceptée mérite d'être sa propre réponse car c'est une solution très élégante qui fonctionne, en effet. Et je vais ajouter un peu à son utilité.
Victor note que l'ajout de position:fixed fonctionne.
body.modal-open {
overflow: hidden;
position: fixed;
}
Et en effet c'est le cas. Cependant, il a également un léger effet secondaire de faire défiler essentiellement vers le haut. position:absolute résout ce problème, mais réintroduit la possibilité de faire défiler sur mobile.
Si vous connaissez votre fenêtre d'affichage ( mon plug-in pour l'ajouter à <body> ), vous pouvez simplement ajouter une bascule CSS pour la variable 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/du masquage 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;
fonctionne sur iOS9
Comme l'indique @Indigenuity, cela semble être dû au fait que les navigateurs ont analysé la balise <meta name="viewport">.
Pour résoudre ce problème à la source, procédez comme suit:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.
Dans mes tests, cela empêche l'utilisateur de faire un zoom arrière pour afficher le contenu débordé et, par conséquent, empêche également le défilement.
C'est la solution la plus simple pour résoudre le défilement horizontal dans Safari.
html, body {
position:relative;
overflow-x:hidden;
}
Aucune solution simple antérieure ne fonctionnait pour moi, je devais les mélanger et résoudre le problème également sur les appareils plus anciens (iphone 3).
Premièrement, je devais envelopper le contenu html dans une div externe:
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
Ensuite, j'ai dû appliquer un débordement masqué au wrapper, car overflow-x ne fonctionnait pas:
#wrapper {
overflow: hidden;
}
et cela a résolu le problème.
Gardez la fenêtre intacte: <meta name="viewport" content="width=device-width, initial-scale=1.0">
En supposant que vous souhaitiez obtenir l'effet d'une barre noire continue sur le côté droit: #menubar ne doit pas dépasser 100%, réglez le rayon bordure de sorte que le côté droit soit carré et réglez le remplissage de manière à qu'il s'étend un peu plus à droite. Modifiez les éléments suivants dans 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*/
Ajuster la padding à 10px laisse bien sûr le menu de gauche au bord de la barre, vous pouvez placer le 40px restant sur chacune des li, 20px de chaque côté gauche et droit:
.menuitem {
display: block;
padding: 0px 20px;
}
Lorsque vous redimensionnez le navigateur, vous trouvez toujours l’arrière-plan blanc: placez votre texture d’arrière-plan à la place de votre div en body. Ou bien, réglez la largeur du menu de navigation de 100% à une valeur inférieure à l'aide de requêtes multimédia. Il y a beaucoup d'ajustements à apporter à 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 résoudra en quelque sorte votre barre de débordement.
J'ai rencontré le même problème avec les appareils Android, mais pas avec les appareils iOS. Géré à résoudre en spécifiant position: relative dans la division externe des éléments positionnés de manière absolue (avec débordement: masqué pour la division externe)
Ajouter un wrapper <div> à l’ensemble de votre contenu fonctionnera. Bien que sémantiquement "icky", j’ai ajouté un div avec une classe de overflowWrap juste à l’intérieur de la balise body, puis ai défini mon CSS comme suit:
html, body, .overflowWrap {
overflow-x: hidden;
}
Peut-être exagéré maintenant, mais fonctionne comme un charme!
La création d'un div de wrapper de site dans le corps et l'application du débordement-> x: hidden au wrapper INSTEAD du corps ou du code html ont résolu le problème.
Cela a fonctionné pour moi après avoir également ajouté position: relative au wrapper.
En tant que sous-arachnide, overflow-x est masqué pour body et html a fonctionné Voici un 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;
}
Cela fait quelques heures que je travaille dessus, en essayant diverses combinaisons d'éléments de cette page et d'autres. À la fin, ce qui a fonctionné pour moi a été de créer un div de wrapper de site, comme suggéré dans la réponse acceptée, mais de définir les deux débordements sur masqué plutôt que sur le débordement x. Si je laisse overflow-y au défilement, je me retrouve avec une page qui ne défile que verticalement de quelques pixels, puis s’arrête.
#all-wrapper {
overflow: hidden;
}
Cela suffisait, sans rien définir sur le corps ou les éléments HTML.
La seule façon de résoudre ce problème pour mon modal bootstrap (contenant un formulaire) était d'ajouter le code suivant à mon CSS:
.modal {
-webkit-overflow-scrolling: auto!important;
}