it-swarm.com.de

Overflow-x: hidden verhindert nicht, dass Inhalte in mobilen Browsern überlaufen

Ich habe eine Website hier .

In einem Desktop-Browser betrachtet, erstreckt sich die schwarze Menüleiste nur bis zum Rand des Fensters, da die bodyoverflow-x:hidden hat. 

In jedem mobilen Browser, egal ob Android oder iOS, zeigt die schwarze Menüleiste ihre volle Breite an, was auf der rechten Seite der Seite zu Leerzeichen führt. Soweit ich das beurteilen kann, ist dieser Leerraum nicht einmal ein Teil der html- oder body-Tags. 

Auch wenn ich den Viewport im <head> auf eine bestimmte Breite eingestellt habe:

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

Die Site erweitert sich auf 1100px, hat aber immer noch den Whitespace über 1100 hinaus. 

Was vermisse ich? Wie halte ich den Viewport auf 1100 und schneide den Überlauf ab?

111
Indigenuity

Das Erstellen eines Site-Wrapperdivs innerhalb der Variablen body und das Anwenden von overflow-x:hidden auf den Wrapper INSTEAD der Variablen body oder html hat das Problem behoben. 

Es scheint, dass Browser, die das <meta name="viewport">-Tag parsen, einfach overflow-Attribute in den html- und body-Tags ignorieren.

217
Indigenuity

VictorS 's Kommentar zur akzeptierten Antwort verdient es, eine eigene Antwort zu sein, weil es eine sehr elegante Lösung ist, die tatsächlich funktioniert. Und ich werde ein bisschen zur Nützlichkeit hinzufügen.

Victor-Notizen, die position:fixed-Werke hinzufügen.

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

Und das tut es auch. Es hat jedoch auch einen leichten Nebeneffekt, wenn man im Wesentlichen nach oben scrollen soll. position:absolute löst dieses Problem auf, führt jedoch erneut die Möglichkeit ein, auf dem mobilen Gerät einen Bildlauf durchzuführen.

Wenn Sie Ihren Darstellungsbereich kennen ( mein Plugin zum Hinzufügen von Darstellungsbereich zum <body> ), können Sie einfach einen CSS-Umschalter für die position hinzufügen.

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

Ich füge dies auch hinzu, um zu verhindern, dass die darunterliegende Seite beim Anzeigen/Ausblenden von Modalen nach links/rechts springt.

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}
66
Brad

versuchen

html, body {
  overflow-x:hidden 
} 

statt nur

body {
  overflow-x:hidden 
}
61
subarachnid
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

funktioniert auf iOS9

15
ollio

In den @Indigenuity-Zuständen scheint es, dass dies von Browsern verursacht wird, die den <meta name="viewport">-Tag analysieren.

Um dieses Problem an der Quelle zu beheben, versuchen Sie Folgendes:

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

In meinen Tests verhindert dies, dass der Benutzer herauszoomen kann, um den überlaufenen Inhalt anzuzeigen, und verhindert somit auch das Verschieben/Scrollen zu diesem Bereich.

14
Tempurturtul

Dies ist die einfachste Lösung, um das horizontale Scrollen in Safari zu lösen.

html, body {
  position:relative;
  overflow-x:hidden;
}
13
Waltur Buerk

Keine bisherige Einzellösung funktionierte für mich, ich musste sie mischen und das Problem wurde auch auf älteren Geräten (iphone 3) behoben.

Zuerst musste ich den HTML-Inhalt in ein äußeres div packen:

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

Dann musste ich den Überlauf versteckt auf den Wrapper anwenden, da Überlauf-x nicht funktionierte:

  #wrapper {
    overflow: hidden;
  }

und das Problem wurde behoben.

5
spaghetticode

Lassen Sie den Darstellungsbereich unverändert: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Angenommen, Sie möchten die Wirkung eines durchgehenden schwarzen Balkens auf der rechten Seite erzielen: #menubar sollte 100% nicht überschreiten, den Grenzradius so einstellen, dass die rechte Seite quadratisch ist, und die Polsterung so anpassen dass es etwas mehr nach rechts reicht. Ändern Sie Folgendes in Ihren #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*/

Wenn Sie die Variable padding auf 10px einstellen, bleibt das linke Menü am Rand der Leiste. Sie können die verbleibenden 40px auf jede der Variablen li, 20px links und rechts setzen:

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

Wenn Sie die Größe des Browsers verkleinern, wird immer noch der weiße Hintergrund angezeigt: Platzieren Sie stattdessen die Hintergrundtextur von div in body. Alternativ können Sie die Breite des Navigationsmenüs mithilfe von Medienabfragen von 100% auf einen niedrigeren Wert einstellen. Es gibt viele Anpassungen, die Sie an Ihrem Code vornehmen müssen, um ein korrektes Layout zu erstellen. Ich bin nicht sicher, was Sie vorhaben, aber der obige Code wird Ihren überfließenden Balken irgendwie reparieren.

4
Anne

Bei Android-Geräten ist das gleiche Problem aufgetreten, jedoch nicht bei iOS-Geräten. Verwaltetes Auflösen durch Angabe von position: relative im äußeren div der absolut positionierten Elemente (mit Überlauf: für äußeres div ausgeblendet)

4
Kwok Pan Fung

Das Hinzufügen eines Wrappers <div> um den gesamten Inhalt wird in der Tat funktionieren. Während semantisch "icky", habe ich ein div mit einer Klasse von overflowWrap direkt im body-Tag hinzugefügt und dann mein CSS so gesetzt:

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

Könnte jetzt übertrieben sein, funktioniert aber wie ein Zauber!

4
MBurnette

Das Erstellen eines Site-Wrappers div im Body und das Anwenden von overflow-> x: hidden auf den Wrapper INSTEAD des Body oder der HTML-Datei hat das Problem behoben.

Dies funktionierte für mich, nachdem auch der Wrapper position: relative hinzugefügt wurde.

3
Isaac F

Als Subarachnid funktionierte overflow-x, das sowohl für body als auch für html verborgen war

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

Verknüpfung

3
Skylin R

Ich habe das Problem mit overflow-x gelöst: hidden; wie folgt

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

struktur ist wie folgt

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

3
vikas etagi

Ich habe gerade ein paar Stunden daran gearbeitet und verschiedene Kombinationen von Dingen von dieser und anderen Seiten ausprobiert. Die Sache, die am Ende für mich funktionierte, bestand darin, einen Site-Wrapper-Div zu erstellen, wie in der akzeptierten Antwort vorgeschlagen, aber beide Überläufe auf versteckt anstatt nur auf den x-Überlauf zu setzen. Wenn ich beim Scrollen Überlauf-y belasse, bekomme ich eine Seite, die nur einige Pixel vertikal scrollt und dann stoppt.

#all-wrapper {
  overflow: hidden;
}

Nur das war genug, ohne irgendetwas an den Body- oder HTML-Elementen zu setzen.

1
highfellow

Dieses Problem für mein Bootstrap-Modal (das ein Formular enthält) konnte nur durch Hinzufügen des folgenden Codes zu meinem CSS behoben werden:

.modal {
    -webkit-overflow-scrolling: auto!important;
}
0
Tobias