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

142

Ich habe eine Website hier .

In einem Desktop-Browser wird die schwarze Menüleiste nur bis zum Rand des Fensters angezeigt, da dies der Fall bodyist overflow-x:hidden.

In jedem mobilen Browser, egal ob Android oder iOS, wird in der schwarzen Menüleiste die gesamte Breite angezeigt, wodurch rechts auf der Seite Leerzeichen angezeigt werden. Soweit ich das beurteilen kann, ist dieses Leerzeichen nicht einmal Teil der Tags htmloder body.

Auch wenn ich das Ansichtsfenster auf eine bestimmte Breite eingestellt habe <head>:

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

Die Site wird auf 1100px erweitert, verfügt jedoch weiterhin über Leerzeichen jenseits von 1100.

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

css overflow viewport mobile-browser Indigenität
quelle

1

Dies ist insbesondere ein Problem in iOS9

Chuck Le Butt

269

Erstellen eines Site-Wrapper-Div innerhalb des <body>und Anwenden des overflow-x:hiddenauf den Wrapper anstelle des <body>oder <html>behoben des Problems.

Es scheint, dass Browser, die das <meta name="viewport">Tag analysieren , overflowAttribute auf dem htmlund einfach ignorierenbody Tags .

Hinweis: Möglicherweise müssen Sie auch position: relativedas Wrapper-Div hinzufügen .

Indigenität
quelle

44

Ich fand , dass zusätzlich die zur Einrichtung overflowzu hidden, ich hatte das zu setzen , positionum fixed...

Victor S

16

Das Hinzufügen einer Position zu einer festen Position verhindert, dass ich scrollen kann!

Theorie

5

Ich habe versucht, ich setze meinen gesamten Code in ein div und gebe ihm overflow-x: versteckt, aber funktioniert nicht, ich füge <meta name = "viewport" content = "width = Gerätebreite, initial-scale = 1"> hinzu auch aber nichts geändert: / irgendwelche ideen?

4

@leepowers funktioniert overflow-x: hiddenimmer noch nicht für mich, selbst nachdem ich dieses Meta-Tag hinzugefügt habe. Könnten Sie bitte einen Link zu Ihrer Website teilen, auf der sie funktioniert?

Jupiter

3

Hey Bande, als ich herausfand, dass das auch position:relativefunktioniert.

Thomas Valadez

80

Versuchen

html, body {
  overflow-x:hidden 
}

statt nur

body {
  overflow-x:hidden 
}

Subarachnid
quelle

7

Vielen Dank, aber die Anwendung von overflowirgendetwas auf htmlund / oder bodyin irgendeiner Kombination hat das Problem nicht gelöst.

Indigenität

Entschuldigung, dass es für Sie nicht geklappt hat. Bevor ich antwortete, machte ich einen kurzen Test mit Ihrer Website und wandte meinen Vorschlag auf Ihr CSS an. Es hat das Problem für den Standard- und Delfin-Browser auf meinem Android-Handy behoben.

Subarachnid

3

Hat für mich gearbeitet. eduardd.eu/projects/ezo (zwischen 480 und 992px Fußzeile hatte ein Problem mit dem überfüllten Bild der Frau und Handtücher)

Eduard

2

Weiß jemand, warum dies funktioniert, wenn die Angabe von body {} und html {} nicht getrennt erfolgt?

Hamncheez

1

Außerdem muss hinzugefügt werden, height:100%;da sonst der vertikale Bildlauf auf Seiten mit geladenen Bildern nicht ordnungsgemäß funktioniert (wodurch die Seite in der Höhe wächst).

Arno van Oordt

69

Der Kommentar von VictorS zu der akzeptierten Antwort verdient eine eigene Antwort, da es sich um eine sehr elegante Lösung handelt, die tatsächlich funktioniert. Und ich werde ein bisschen zu seiner Nützlichkeit hinzufügen.

Victor bemerkt, dass er position:fixedWerke hinzufügt .

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

Und tatsächlich tut es das auch. Es hat jedoch auch einen leichten Nebeneffekt, wenn im Wesentlichen nach oben gescrollt wird. position:absolutebehebt dieses Problem, führt jedoch die Möglichkeit zum Scrollen auf Mobilgeräten wieder ein.

Wenn Sie Ihr Ansichtsfenster kennen ( mein Plugin zum Hinzufügen des Ansichtsfensters zum<body> ), können Sie einfach einen CSS-Schalter für das hinzufügen 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; 
}

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

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

Brad
quelle

2

Gibt es überhaupt eine Möglichkeit, das mobile Teil dazu zu bringen, nicht nach oben zu springen?

WraithKenny

1

Was für mich funktionierte, war das Drehen des Elements, das durch Überlauf verborgen werden sollte, von Position: absolut zu Position: fest. Gott sei Dank.

Chuck Le Butt

1

@WraithKenny - Wenn Sie möchten, dass die Seite auf einem mobilen Gerät nicht nach oben springt, können Sie den folgenden hack'ish / hässlichen Ansatz verwenden. Stellen Sie innerhalb Ihrer Modalfunktion sicher, dass Sie den aktuellen Bildlaufversatz erhalten, bevor Sie etwas tun, als den Modalstil zusammen anzuwenden und den oberen Rand Ihres Körpers gleich dem Minus des aktuellen Versatzes zu setzen. Stellen Sie sicher, dass Sie beim Entfernen des Modals den Rand auf 0 zurücksetzen und die Seite zum ursprünglichen Versatz zurückblättern.

Emil Borconi

2

Diese Lösung funktioniert nur, wenn der Inhalt Ihres Modals in den Bildschirm passt, dh Sie müssen nicht durch das Modal selbst scrollen.

Tobias

Es gibt auch andere feste und absolut positionierte Elemente auf meiner Seite. Den Körper dazu bringen position:fixed or absolute, auch ihre Positionen zu stören. Nicht geeignet / funktioniert in meinem Fall :(

Sohaiby

30

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

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

Waltur Buerk
quelle

1

Es scheint zu funktionieren. Aber haben Sie eine Erklärung, warum das funktioniert?

LarS

Nein, es hat endlich nicht funktioniert. Am Ende habe ich nachgerechnet und sichergestellt, dass die Divs nicht breiter als erlaubt sind. CSS calc () hat mir hier sehr geholfen, da es die Mischung aus relativen Breiten (vw oder%) und absoluten Breiten (px) ermöglicht.

LarS

Natürlich ist dies eine Art Problemumgehung. Irgendwo läuft immer noch etwas über, es ist gerade abgeschnitten. Versuchen Sie, eine CSS-Regel hinzuzufügen: * {Umriss: 1px durchgehend rot; } Wenn Sie das überlaufende Element immer noch nicht finden können, liegt es wahrscheinlich an einem Rand. Versuchen Sie, * {margin: 0! WICHTIG hinzuzufügen; } und prüfen Sie, ob der Überlauf verschwindet.

Waltur Buerk

Funktioniert bei mir. Interessant, dass das versteckte Element die Breite des Körpers ändert. Für mich ist dies jedoch bei ALLEN Safari-Browsern der Fall, nicht nur bei den mobilen. Musste nur einen Bootstrap 4 table-responsiveBug beheben . Dies war die Lösung.

CunningFatalist

2

Ich kann nicht glauben, dass dies 2019 immer noch ein Problem ist. Aber die obige Lösung hat völlig funktioniert. Vielen Dank.

Staxim

28

Wie @Indigenuity angibt, scheint dies darauf zurückzuführen zu sein, dass Browser das <meta name="viewport">Tag analysieren .

Versuchen Sie Folgendes, um dieses Problem an der Quelle zu lösen:

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

In meinen Tests verhindert dies, dass der Benutzer herauszoomt, um den übergelaufenen Inhalt anzuzeigen, und verhindert daher auch das Schwenken / Scrollen.

Tempurturtul
quelle

Das Hinzufügen initial-scale=1zu einem vorhandenen Metatag für Ansichtsfenster behebt das Problem tatsächlich. Vielen Dank!

James Wilson

6

Für mich war es das minimum-scale=1, was es behoben hat

jpenna

Das hat bei mir tatsächlich funktioniert, nachdem ich alles andere ausprobiert hatte. Vielen Dank !

Harsh Limaye

16

body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

funktioniert unter iOS9

ollio
quelle

3

Es funktioniert, aber wenn Sie die Position

festlegen

1

Seltsam, aber es hat bei mir auch ohne feste Position funktioniert. Nur eine von allen Lösungen hier!

Garavani

Nur eine, die für mich funktioniert hat, mit Chrom und Boostrap + AngularJS

Kiwicomb123

6

Lassen Sie das Ansichtsfenster unberührt: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Angenommen, Sie möchten den Effekt eines durchgehenden schwarzen Balkens auf der rechten Seite erzielen: #menubarSollte 100% nicht überschreiten , stellen Sie den Randradius so ein, dass die rechte Seite quadratisch ist, und passen Sie die Polsterung so an, dass sie sich etwas weiter nach rechts erstreckt . Ändern Sie Folgendes an Ihrem #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*/

Einstellen des paddingzu 10px natürlich Blätter der linken Menü auf den Rand der Leiste, können Sie die restlichen setzen 40px zu jedem der li, 20px auf jeder Seite links und rechts:

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

Wenn Sie die Größe des Browsers verkleinern, finden Sie immer noch den weißen Hintergrund: Platzieren Sie stattdessen Ihre Hintergrundtextur von Ihrem div bis body. Alternativ können Sie die Breite des Navigationsmenüs mithilfe von Medienabfragen von 100% auf einen niedrigeren Wert einstellen. Es müssen viele Anpassungen an Ihrem Code vorgenommen werden, um ein korrektes Layout zu erstellen. Ich bin mir nicht sicher, was Sie vorhaben, aber der obige Code wird Ihre überlaufende Leiste irgendwie reparieren.

Anne
quelle

Wenn Sie verwenden box-sizing: border-box;, können Sie einem Div mit 100% Breite eine Polsterung hinzufügen.

Charles John Thompson III

6

Das Erstellen eines Site-Wrapper-Divs im Body und das Anwenden des Überlaufs-> x: versteckt auf den Wrapper STATT des Body oder HTML hat das Problem behoben.

Dies funktionierte für mich, nachdem ich auch position: relativeden Wrapper hinzugefügt hatte .

Isaac F.
quelle

Das hat bei mir funktioniert. Der Nebeneffekt war, dass ich zwei Bildlaufleisten anstelle einer habe. Die Lösung war, es overflow: hiddenstatt zu machen overflow-x: hidden. Funktioniert unter Mobile Safari, Chrome, IE11 unter OSX und Win.

Pop

4

Das Hinzufügen eines Wrappers <div>um den gesamten Inhalt funktioniert in der Tat. Während ich semantisch "icky" war, fügte ich ein div mit einer Klasse von overflowWrap direkt innerhalb des bodyTags hinzu und stellte mein CSS wie folgt ein :

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

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

MBurnette
quelle

4

Ich habe das gleiche Problem mit Android-Geräten festgestellt, aber nicht mit iOS-Geräten. Kann durch Angabe der Position aufgelöst werden: relativ im äußeren Teil der absolut positionierten Elemente (mit Überlauf: für äußeren Teil ausgeblendet)

Kwok Pan Fung
quelle

4

Bei mir funktionierte keine vorherige Einzellösung, 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 wickeln:

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

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

  #wrapper {
    overflow: hidden;
  }

und dies behebt das Problem.

Spaghetticode
quelle

Wie unterscheidet sich das von der Antwort von @ Indigenuity?

Ian Kemp

3

@ian Kemp Überlauf: versteckt! = Überlauf-x: versteckt

Spaghetticode

3

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

vikas etagi
quelle

3

Wie Subarachnid sagte, funktionierte Overflow-X, das sowohl für Body als auch für HTML versteckt war. Hier ist ein Arbeitsbeispiel

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

Skylin R.
quelle

1

Ich habe gerade ein paar Stunden daran gearbeitet und verschiedene Kombinationen von Dingen auf dieser und anderen Seiten ausprobiert. Am Ende hat es für mich funktioniert, 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 den Überlauf y lasse, wird eine Seite angezeigt, die nur um einige Pixel vertikal scrollt und dann stoppt.

#all-wrapper {
  overflow: hidden;
}

Nur das war genug, ohne etwas auf den Körper oder HTML-Elemente zu setzen.

Highfellow
quelle

1

Ich hatte viele Möglichkeiten aus den Antworten in diesem Thema ausprobiert, funktioniert meistens, hatte aber einige Nebenwirkungen, wie wenn ich overflow-x verwende body,html es die Seite verlangsamen / einfrieren, wenn Benutzer auf dem Handy nach unten scrollen.

verwenden position: fixed für Wrapper / Div im Körper ist auch gut, aber wenn ich ein Menü habe und Javascript verwende, klicken Sie auf animierten Bildlauf zu einem Abschnitt, es funktioniert nicht.

Also entschied ich mich für touch-action: pan-y pinch-zoomWrapper / Div im Körper. Problem gelöst.

Jirayu L.
quelle

0

Die einzige Möglichkeit, dieses Problem für mein Bootstrap-Modal (das ein Formular enthält) zu beheben, bestand darin, meinem CSS den folgenden Code hinzuzufügen:

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

Tobias
quelle

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

Antworten: