Overflow-x: nascosto non impedisce ai contenuti di traboccare nei browser mobili

142

Ho un sito web qui .

Vista in un browser desktop, la barra dei menu nera si estende correttamente solo al bordo della finestra, poiché bodyha overflow-x:hidden.

In qualsiasi browser mobile, sia Android che iOS, la barra dei menu nera mostra la sua larghezza massima, il che porta spazi bianchi a destra della pagina. Per quanto ne so, questo spazio bianco non fa nemmeno parte dei tag htmlo body.

Anche se ho impostato il viewport su una larghezza specifica in <head>:

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

Il sito si espande a 1100px ma ha ancora spazi bianchi oltre a 1100px.

Cosa mi sto perdendo? Come posso mantenere il viewport a 1100 e tagliare l'overflow?

— Indigenuity
fonte

1

Questo è particolarmente un problema in iOS9

— Chuck Le Butt,

270

La creazione di un div del wrapper del sito all'interno <body>e l'applicazione del overflow-x:hiddenal wrapper anziché <body>o <html>risolto il problema.

Sembra che i browser che analizzano il <meta name="viewport">tag semplicemente ignorino gli overflowattributi sui tag htmle body.

Nota: potrebbe essere necessario aggiungere anche position: relativeal div wrapper.

— Indigenuity
fonte

44

Ho scoperto che oltre a impostare il overflowto hidden, dovevo impostare il positionsu fixed...

— Victor S

16

L'aggiunta di una posizione fissa mi impedisce di scorrere!

— teorizza il

5

Ho provato, ho inserito tutto il mio codice in un div e l'ho fornito con overflow-x: nascosto ma non funziona, aggiungo <meta name = "viewport" content = "width = device-width, initial-scale = 1"> anche ma nulla è cambiato: / qualche idea?

4

@leepowers overflow-x: hiddennon funziona ancora per me anche dopo aver aggiunto questo meta tag. Potresti condividere un link al tuo sito Web dove sta funzionando?

— Giove,

3

Ehi banda, quando ho scoperto che position:relativefunziona anche.

— Thomas Valadez,

80

provare

html, body {
  overflow-x:hidden 
}

invece di solo

body {
  overflow-x:hidden 
}

— subarachnid
fonte

7

Grazie, ma l'applicazione di overflowqualsiasi cosa in htmle / o bodyin qualsiasi combinazione non ha risolto il problema.

— Indigenuity

Mi dispiace che non abbia funzionato per te. Prima di rispondere ho fatto un rapido test usando il tuo sito e applicando il mio suggerimento al tuo CSS. Risolveva almeno il problema del browser standard e delfino sul mio telefono Android.

— subaracnide,

3

Ha funzionato per me. eduardd.eu/projects/ezo (tra 480 e 992 px il piè di pagina aveva un problema con quell'immagine traboccante della donna e degli asciugamani)

— Eduard

2

Qualcuno sa perché questo funziona, quando si specifica body {} e html {} separatamente?

— Hamncheez,

1

È necessario aggiungere height:100%;anche, altrimenti lo scorrimento verticale non funzionerebbe correttamente sulle pagine con immagini caricate (che aumentano l'altezza della pagina).

— Arno van Oordt,

69

Il commento di VictorS sulla risposta accettata merita di essere la sua risposta perché è una soluzione molto elegante che funziona davvero. E aggiungerò un po 'alla sua utilità.

Victor rileva l'aggiunta di position:fixedopere.

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

E infatti lo fa. Tuttavia, ha anche un leggero effetto collaterale di scorrere essenzialmente verso l'alto. position:absoluterisolve questo problema, ma reintroduce la possibilità di scorrere sui dispositivi mobili.

Se conosci il tuo viewport (il mio plugin per aggiungere viewport al<body> ) puoi semplicemente aggiungere un css toggle per il 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; 
}

Aggiungo anche questo per evitare che la pagina sottostante salti a sinistra / a destra quando mostra / nasconde modali.

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

— chiodo senza testa
fonte

2

Esiste un modo per evitare che la parte mobile non salti in cima?

— WraithKenny,

1

Ciò che ha funzionato per me è stato girare l'elemento che doveva essere nascosto da un overflow dalla posizione: assoluto alla posizione: fisso. Per fortuna.

— Chuck Le Butt,

1

@WraithKenny - Se vuoi che la pagina non salti in cima su un dispositivo mobile, puoi usare il seguente approccio hack'ish / brutto. All'interno della tua funzione modale, assicurati di ottenere l'offset di scorrimento corrente prima di fare qualsiasi cosa, quindi applica insieme lo stile modale e imposta anche il margine superiore del tuo corpo uguale al meno dell'offset corrente. Quando rimuovi il modale, assicurati di riportare il margine su 0 e scorrere la pagina indietro fino all'offset originale.

— Emil Borconi,

2

Questa soluzione funziona solo nel caso in cui il contenuto modale si adatti allo schermo, ovvero non è necessario scorrere il modale stesso.

— Tobias,

Ci sono anche altri elementi fissi e posizionati in modo assoluto sulla mia pagina. Rendere anche il corpo a position:fixed or absolutedisturbare le loro posizioni. Non adatto / funzionante nel mio caso :(

— sohaiby

31

Questa è la soluzione più semplice per risolvere lo scorrimento orizzontale in Safari.

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

— Waltur Buerk
fonte

1

Sembra funzionare Ma hai una spiegazione del perché questo funziona?

— LarS,

No, alla fine non ha funzionato. Ho finito per fare i calcoli e mi sono assicurato che i div non fossero più ampi di quelli consentiti, css calc () mi ha aiutato molto qui perché mi permette di mescolare larghezze relative (vw o%) e larghezze assolute (px).

— LarS

Naturalmente questa è una soluzione alternativa. C'è ancora qualcosa che trabocca da qualche parte, ora è solo tagliato. Prova ad aggiungere una regola CSS: * {outline: 1px rosso fisso; } Se non riesci ancora a trovare l'elemento di overflow, probabilmente è causato da un margine da qualche parte. Prova ad aggiungere * {margin: 0! IMPORTANTE; } e vedere se l'overflow scompare.

— Waltur Buerk,

Per me va bene. Interessante che l'elemento nascosto cambi la larghezza del corpo. Per me, tuttavia, questo è il caso di TUTTI i browser Safari, non solo quelli mobili. Ho dovuto riparare un table-responsivebug Bootstrap 4 . Questa era la soluzione.

— CunningFatalist

2

Non riesco a credere che questo sia ancora un problema nel 2019. Ma la soluzione sopra ha funzionato totalmente. Grazie.

— Staxim,

28

Come afferma @Indigenuity, ciò sembra essere causato dai browser che analizzano il <meta name="viewport">tag.

Per risolvere questo problema alla fonte, prova quanto segue:

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

Nei miei test ciò impedisce all'utente di eseguire lo zoom indietro per visualizzare il contenuto traboccato e di conseguenza impedisce anche il panning / scorrimento.

— Tempurturtul
fonte

L'aggiunta initial-scale=1a un metatag viewport esistente risolve davvero il problema. Grazie!

— JamesWilson,

6

Per me è stato quello minimum-scale=1che l'ha risolto

— jpenna il

Questo è ciò che ha funzionato per me dopo aver provato tutto il resto. Molte grazie !

— Harsh Limaye,

16

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

funziona su iOS9

— Ollio
fonte

3

Funziona, ma mettendo la posizione: fissato al tuo corpo ti fa scorrere verso l'alto

— ThaoD5

1

Strano ma ha funzionato anche per me senza posizione fissa. Solo uno tra tutte le soluzioni qui!

— Garavani,

Solo uno che ha funzionato per me, usando chrom e boostrap + angularJS

— kiwicomb123

6

Mantenere intatto il viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Supponendo che desideri ottenere l'effetto di una barra nera continua sul lato destro: #menubarnon superare il 100% , regolare il raggio del bordo in modo che il lato destro sia quadrato e regolare l'imbottitura in modo che si estenda un po 'più a destra . Modifica quanto segue per il tuo #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*/

Regolando paddingnaturalmente a 10px si lascia il menu a sinistra sul bordo della barra, è possibile posizionare i rimanenti 40px su ciascuno dei li, 20px su ciascun lato sinistro e destro:

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

Quando ridimensionate il browser più piccolo, troverete ancora lo sfondo bianco: posizionate invece la trama di sfondo dal div a body. In alternativa, regola la larghezza del menu di navigazione dal 100% al valore più basso utilizzando le query multimediali. Ci sono molte modifiche da apportare al tuo codice per creare un layout adeguato, non sono sicuro di cosa tu voglia fare, ma il codice sopra risolverà in qualche modo la tua barra di overflow.

— Anne
fonte

se lo usi box-sizing: border-box;puoi aggiungere un'imbottitura a un div della larghezza del 100%.

— Charles John Thompson III,

6

La creazione di un div del wrapper del sito all'interno del corpo e l'applicazione di overflow-> x: nascosto al wrapper INSTEAD del body o html hanno risolto il problema.

Questo ha funzionato per me dopo aver aggiunto anche position: relativeal wrapper.

— Isaac F
fonte

Questo ha funzionato per me. L'effetto collaterale è che ho due barre di scorrimento anziché una. La soluzione era di farcela overflow: hiddeninvece di overflow-x: hidden. Funziona su Safari mobile, Chrome, IE11 su OSX e Win.

— pop

4

L'aggiunta di un wrapper <div>per l'intero contenuto funzionerà davvero. Mentre semanticamente "icky", ho aggiunto un div con una classe di overflow, avvolto proprio all'interno del bodytag e quindi ho impostato il mio CSS in questo modo:

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

Potrebbe essere eccessivo ora, ma funziona come un fascino!

— MBurnette
fonte

4

Ho riscontrato lo stesso problema con dispositivi Android ma non con dispositivi iOS. Gestito per risolvere specificando la posizione: relativo nel div esterno degli elementi assolutamente posizionati (con overflow: nascosto per div esterno)

— Kwok Pan Fung
fonte

4

Nessuna precedente soluzione singola ha funzionato per me, ho dovuto mescolarle e ho risolto il problema anche su dispositivi meno recenti (iPhone 3).

Innanzitutto, ho dovuto racchiudere il contenuto html in un div esterno:

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

Quindi ho dovuto applicare l'overflow nascosto al wrapper, perché overflow-x non funzionava:

  #wrapper {
    overflow: hidden;
  }

e questo ha risolto il problema.

— spaghetti code
fonte

In che modo differisce dalla risposta di @Indigenuity?

— Ian Kemp,

3

@ian Kemp overflow: hidden! = overflow-x: hidden

— spaghett

3

Ho risolto il problema utilizzando overflow-x: hidden; come segue

@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 struttura è la seguente

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
fonte

3

Come ha detto subaracnide overflow-x nascosto sia per body che per html ha funzionato Ecco un esempio funzionante

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

collegamento

— Skylin R
fonte

1

Ci sto lavorando da poche ore, provando varie combinazioni di cose da questa e da altre pagine. La cosa che ha funzionato per me alla fine è stata quella di creare un div del wrapper del sito, come suggerito nella risposta accettata, ma di impostare entrambi gli overflow su nascosto anziché solo l'overflow x. Se lascio overflow-y allo scorrimento, finisco con una pagina che scorre solo verticalmente di alcuni pixel e poi si ferma.

#all-wrapper {
  overflow: hidden;
}

Basta questo, senza impostare nulla sul corpo o sugli elementi html.

— highfellow
fonte

1

Avevo provato in molti modi dalle risposte in questo argomento, per lo più funziona, ma ho avuto alcuni effetti collaterali come se uso overflow-x su di body,htmlesso potrebbe rallentare / congelare la pagina quando gli utenti scorrono verso il basso sul cellulare.

anche l'uso position: fixedsu wrapper / div all'interno del corpo è buono, ma quando ho un menu e utilizzo Javascript, scorro animato in alcune sezioni, non funziona.

Quindi, ho deciso di utilizzare touch-action: pan-y pinch-zoomsu wrapper / div all'interno del corpo. Problema risolto.

— Jirayu L
fonte

0

L'unico modo per risolvere questo problema per il mio modale bootstrap (contenente un modulo) era aggiungere il seguente codice al mio CSS:

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

— Tobias
fonte