Overflow: nascosto applicato a funziona su iPhone Safari?

overflow:hidden applicato a funziona su iPhone Safari? Non sembra. Non riesco a creare un wrapper su tutto il sito Web per raggiungere questo …

Conosci la soluzione?

Esempio: ho una pagina lunga e semplicemente voglio hide il contenuto che va sotto la “piega” e dovrebbe funzionare su iPhone / iPad.

Ho riscontrato un problema simile e ho trovato che applicare l’ overflow: hidden; ad entrambi html e body risolto il mio problema.

 html, body { overflow: hidden; } 

Per iOS 9, potrebbe essere necessario utilizzare questo invece: (Grazie chaenu!)

 html, body { overflow: hidden; position: relative; height: 100%; } 
 body { position:relative; // that's it overflow:hidden; } 

Alcune soluzioni elencate qui hanno alcuni strani inconvenienti quando si estende lo scrolling elastico. Per risolvere quello che ho usato:

 body.lock-position { height: 100%; overflow: hidden; width: 100%; position: fixed; } 

Fonte: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

Aveva questo problema oggi su iOS 8 e 9 e sembra che ora abbiamo bisogno di aggiungere altezza: 100%;

Quindi aggiungi

 html, body { position: relative; height: 100%; overflow: hidden; } 

Combinare le risposte e i commenti qui e questa domanda simile qui ha funzionato per me.

Quindi postare come risposta completa.

Ecco come è necessario mettere un wrapper div intorno al contenuto del tuo sito, solo all’interno del tag .

         

Crea la class wrapper come sotto.

 .wrapper{ position:relative; //that's it overflow:hidden; } 

Ho anche avuto l’idea da questa risposta qui .

E anche qui questa risposta ha qualche spunto di riflessione. Qualcosa che probabilmente funzionerà altrettanto bene su desktop e dispositivi.

Perché non avvolgere il contenuto che non si desidera mostrare in un elemento con una class e impostare quella class da display:none in un foglio di stile destinato esclusivamente all’iPhone e ad altri dispositivi portatili?

    

Funziona nel browser Safari.

 html, body { overflow: hidden; position: fixed } 

Sì, questo è correlato ai nuovi aggiornamenti in Safari che stanno rompendo il tuo layout ora se usi un overflow: nascosto per occuparti delle operazioni di compensazione.

Si applica, ma si applica solo a determinati elementi all’interno del DOM. per esempio, non funzionerà su una tabella, td o altri elementi, ma funzionerà su un tag

.
per esempio:

   

Testato solo su iOS 4.3.

Una piccola modifica: potresti star meglio usando l’overflow: scorri in modo che lo scorrimento a due dita funzioni.

 html { position:relative; top:0px; left:0px; overflow:auto; height:auto } 

aggiungi questo come predefinito al tuo css

 .class-on-html{ position:fixed; top:0px; left:0px; overflow:hidden; height:100%; } 

toggleClass questa class per tagliare la pagina

quando spegni questa class, la prima riga richiamerà la barra di scorrimento

Ho lavorato con e

Quando il popup si apre …

ottiene un’altezza del 100% e un overflow: nascosto

ottiene la posizione: relativo; overflow: nascosto; altezza: 100%;

Io uso JS / jQuery per ottenere la reale scrollposition della pagina e memorizzare il valore come attributo dati al corpo

Quindi scorro fino alla posizione di scorrimento nel DIV .wrapper (non nella finestra)

Ecco la mia soluzione:

JS / jQuery:

 // when popup opens $('body').attr( 'data-pos', $(window).scrollTop()); // get actual scrollpos $('body').addClass('locked'); // add class to body $('.wrapper').scrollTop( $('body').attr( 'data-pos' ) ); // let wrapper scroll to scrollpos // when popup close $("body").removeClass('locked'); $( window ).scrollTop( $('body').attr( 'data-pos' )); 

CSS:

 body.locked {position:relative;overflow:hidden;height:100%;} body.locked .wrapper {position:relative;overflow:hidden;height:100%;} 

Funziona bene su entrambi i lati … desktop e mobile (iOS).

Tipps e miglioramenti sono i benvenuti 🙂

Saluti!

Per me questo:

 height: 100%; overflow: hidden; width: 100%; position: fixed; 

Non è stato sufficiente, non ho funzionato su iOS con Safari. Ho anche dovuto aggiungere:

 top: 0; left: 0; right: 0; bottom: 0; 

Per farlo funzionare bene. Funziona bene ora 🙂

Basta cambiare l’altezza del corpo <300px (l'altezza della finestra mobile su Landspace è compresa tra 300px e 500px)

JS

 $( '.offcanvas-toggle' ).on( 'click', function() { $( 'body' ).toggleClass( 'offcanvas-expanded' ); }); 

CSS

 .offcanvas-expended { /* this is class added to body on click */ height: 200px; } .offcanvas { height: 100%; }