Overflow-x: hidden non impedisce al contenuto di traboccare nei browser mobili

Ho un sito qui .

Visto in un browser desktop, la barra dei menu nera si estende correttamente solo fino al bordo della finestra, poiché il body ha overflow-x:hidden .

In qualsiasi browser per dispositivi mobili, sia Android che iOS, la barra dei menu nera mostra la sua larghezza completa, che porta gli spazi bianchi sulla destra della pagina. Per quanto ne so, questo spazio bianco non è nemmeno una parte dei tag html o body .

Anche se imposto la finestra su una larghezza specifica in :

  

Il sito si espande al 1100px ma ha ancora gli spazi oltre il 1100.

Cosa mi manca? Come mantenere la vista su 1100 e tagliare l’overflow?

La creazione di un div wrapper del sito all’interno del body e l’applicazione di overflow-x:hidden al wrapper INSTEAD del body o html risolto il problema.

Sembra che i browser che analizzano il semplicemente ignorino gli attributi di overflow sui tag html e body .

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

Victor nota l’aggiunta della position:fixed lavori position:fixed .

 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:absolute risolve questo, ma reintroduce la possibilità di scorrere su mobile.

Se conosci il tuo viewport (il mio plugin per l’aggiunta di viewport al ) puoi semplicemente aggiungere un interruttore css per la 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 / destra quando mostra / nasconde le modali.

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

provare

 html, body { overflow-x:hidden } 

invece di solo

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

funziona su iOS9

Come afferma @Indigenuity, questo sembra essere causato dai browser che analizzano il .

Per risolvere questo problema all’origine, prova quanto segue:

.

Nei miei test ciò impedisce all’utente di eseguire lo zoom indietro per visualizzare il contenuto in overflow e, di conseguenza, impedisce il panning / lo scorrimento verso di esso.

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

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

Nessuna precedente soluzione singola ha funzionato per me, ho dovuto mescolarli e ho risolto il problema anche sui dispositivi più vecchi (iphone 3).

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

   
... old html goes here ...

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

  #wrapper { overflow: hidden; } 

e questo ha risolto il problema.

Mantieni intatta la vista:

Supponendo che si desideri ottenere l’effetto di una barra nera continua sul lato destro: #menubar non deve superare il 100% , regolare il raggio del bordo in modo tale che il lato destro sia quadrato e regolare il padding in modo che si estenda un po ‘di più la destra. Modifica quanto segue per #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 il padding a 10px, ovviamente, il menu a sinistra lascia il bordo della barra, puoi mettere il restante 40px a ciascuno di li , 20px su ciascun lato a sinistra ea destra:

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

Quando ridimensionate il browser più piccolo, troverete ancora lo sfondo bianco: posizionate la texture dello sfondo invece dal vostro div al body . In alternativa, regola la larghezza del menu di navigazione dal 100% al valore inferiore utilizzando le query multimediali. Ci sono molti aggiustamenti da apportare al tuo codice per creare un layout corretto, non sono sicuro di cosa intendi fare ma il codice di cui sopra risolverà in qualche modo la tua barra traboccante.

Aggiungere un wrapper

attorno alla totalità dei tuoi contenuti funzionerà davvero. Mentre semanticamente “icky”, ho aggiunto un div con una class di overflowWrap proprio all’interno del tag body e quindi ho impostato il mio CSS in questo modo:

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

Potrebbe essere eccessivo, ma funziona come un fascino!

Ho riscontrato lo stesso problema con i dispositivi Android ma non con i dispositivi iOS. Riuscito a risolvere specificando la posizione: relativo nel div esterno degli elementi posizionati in modo assoluto (con overflow: nascosto per div esterno)

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

Come subaracnide ha detto overflow-x nascosto sia per body che html ha funzionato. Ecco l’esempio di lavoro

 **HTML** 
First Strip
Second Strip
dsa
**CSS** body, html{ overflow-x:hidden; } body{ margin:0; } .contener{ width:100vw; } .baner{ background-image: url("http://sofit.miximages.com/css/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

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

Questo ha funzionato per me anche dopo aver aggiunto la position: relative al wrapper.

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

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

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 wrapper del sito, come suggerito nella risposta accettata, ma di impostare entrambi gli overflow su hidden invece del solo overflow x. Se esco dall’overflow-y allo scroll, finisco con una pagina che scorre solo verticalmente di alcuni pixel e poi si ferma.

 #all-wrapper { overflow: hidden; } 

Solo questo era abbastanza, senza impostare nulla sul corpo o elementi html.