Overflow: nascosto applicato a <body> funziona su iPhone Safari?

131

Viene overflow:hiddenapplicato per <body>funzionare su iPhone Safari? Sembra di no Non riesco a creare un wrapper su tutto il sito Web per raggiungere questo ...

Conosci la soluzione?

Esempio: ho una pagina lunga e voglio semplicemente nascondere il contenuto che si trova sotto la "piega" e dovrebbe funzionare su iPhone / iPad.

— Francesco
fonte

1

Cercando disperatamente di trovare la risposta a me stesso.

— mwilcox,

115

Ho avuto un problema simile e ho scoperto che applicando overflow: hidden;ad entrambi htmle bodyrisolto 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%;
}

— Alex Haas
fonte

12

Questo non funziona su iOS Safari. posizione: è necessario anche un parente.

— Kevin Borders,

5

Sì, aggiungi sia relativo che overflow a html + body

— wutang

3

questo non funziona su iOS 9, anche usando la posizione relativa su body e html

— Charles John Thompson III

1

Un avvertimento, overflow nascosto sul tag <html> interromperà l'evento scroll di jQuery

— Brett Gregson

2

Questo non funziona per me su iOS 9, Safari. Corpo ancora scorrevole, anche dopo l'aggiunta position: relative.

— Edo,

87

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

— laFunk
fonte

3

GRAZIE. TU. Ho avuto un grosso problema quando gli elementi venivano trasferiti dall'esterno del viewport, all'interno. Si verificherà uno strano bug in cui il contenuto viene esteso. Questa è stata la soluzione per me!

— Eric,

48

Nel mio caso l'aggiunta di "position: relative" non ha aiutato, ma l'aggiunta di "position: fixed" ha funzionato.

— Almeno l'

1

Sì, ha funzionato. Sto costruendo un sito in cui vogliono che il navigatore mobile passi oltre il contenuto, ma quando è aperto il contenuto dietro il nav in background continua a scorrere. Anche le altre risposte con posizione, overflow e altezza hanno funzionato, ma con l'altezza la pagina salta all'inizio quando apro il navigatore. Immagino sia unico per la mia situazione, ma ho pensato di menzionarlo nel caso in cui qualcun altro con il navigatore sovrapposto abbia lo stesso problema.

— moonunit7,

Dove va il wrapper? In che modo questa è una risposta completa?

— Kugel,

8

L'aggiunta di posizione fissa fa affrontare il tema, ma rende la pagina zum parte superiore, che è male per UX se stai attuazione del presente in background mentre si presenta un menu o modale. Per creare una buona UX, prima di bloccare la posizione, è necessario memorizzare la posizione di scorrimento della pagina, quindi riapplicarla dopo averla sbloccata.

— microfono

27

Alcune soluzioni elencate qui presentavano alcuni strani problemi durante l'allungamento dello scorrimento 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/

— Davey
fonte

4

Questo è carino (funziona meglio nel mio caso di position: relative) tuttavia, la posizione di scorrimento viene persa dopo aver ripristinato lo stile predefinito (ad es. Menu di chiusura).

— jmarceli,

1

Per la posizione di scorrimento puoi usare js (jquery in questo esempio) fare qualcosa del genere:

// on menu open   // save window pos   $('body').attr( 'data-pos', $(window).scrollTop() ) ;   // ...   // on menu close   // scroll to saved window pos   $( window ).scrollTop( $('body').attr( 'data-pos' ) );

— Davey,

Questo ha davvero fatto il segno di spunta per me!

— D.Steinel,

8

Ho riscontrato questo problema oggi su iOS 8 e 9 e sembra che ora dobbiamo aggiungere l'altezza: 100%;

Quindi aggiungi

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

— chaenu
fonte

4

La combinazione di risposte e commenti qui e questa domanda simile qui ha funzionato per me.

Quindi pubblicando una risposta completa.

Ecco come è necessario inserire un div wrapper attorno al contenuto del tuo sito, proprio all'interno del <body>tag.

 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <!-- other meta and head stuff here -->
 <head>
 <body>
     <div class="wrapper">
         <!-- Your site content here -->
     </div>
 </body>
 </html>

Creare la classe wrapper come di seguito.

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

Ho anche avuto l'idea da questa risposta qui .

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

— Devraj Gadhavi
fonte

Questa è stata la soluzione per me.

— Roel Magdaleno,

1

Questo fa sì che la pagina scorra verso l'alto per me quando il modale viene chiuso.

— Jason,

4

Funziona nel browser Safari.

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

— Sridhar
fonte

4

Per me questo:

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

Non era abbastanza, non ho funzionato su iOS su Safari. Ho anche dovuto aggiungere:

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

Per farlo funzionare bene. Funziona bene ora :)

— Loosie94
fonte

2

Ho lavorato con <body>e<div class="wrapper">

Quando si apre il popup ...

<body> ottiene un'altezza del 100% e un overflow: nascosto

<div class="wrapper"> ottiene la posizione: relativa; overflow: nascosto; altezza: 100%;

Uso JS / jQuery per ottenere l'effettiva posizione di scorrimento della pagina e memorizzare il valore come attributo dei dati al corpo

Quindi scorro fino alla posizione di scorrimento nel .wrapper DIV (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).

Suggerimenti e miglioramenti sono i benvenuti :)

Saluti!

— Toge
fonte

1

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

aggiungilo come predefinito al tuo css

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

toggleClass questa classe per tagliare la pagina

quando disattivi questa classe, la prima riga richiamerà la barra di scorrimento

— Longwinter
fonte

0

Sì, questo è correlato ai nuovi aggiornamenti di Safari che stanno interrompendo il layout ora se si utilizza l'overflow: nascosto per occuparsi di cancellare i div.

— Lee McAlilly
fonte

10

Puoi approfondire con questo, o citare una fonte? Questa risposta potrebbe essere corretta, ma non è molto utile.

— pjmorse,

0

Si applica, ma si applica solo a determinati elementi all'interno del DOM. ad esempio, non funzionerà su una tabella, td o altri elementi, ma funzionerà su un tag <DIV>.
per esempio:

<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Testato solo su iOS 4.3.

Una modifica minore: è possibile che tu stia meglio usando l'overflow: scroll in modo che due scrolling delle dita funzionino.

— Adamo
fonte

0

Perché non racchiudere il contenuto che non si desidera venga mostrato in un elemento con una classe e impostare quella classe display:nonein un foglio di stile pensato solo per l'iPhone e altri dispositivi portatili?

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->

— S16
fonte

0

Ecco cosa ho fatto: controllo la posizione del corpo y, quindi fisso il corpo e adeguo la parte superiore al negativo di quella posizione. Al contrario, rendo il corpo statico e imposto lo scorrimento sul valore che ho registrato prima.

var body_x_position = 0;

function disable_bk_scrl(){

    var elb = document.querySelector('body');

    body_x_position = elb.scrollTop;
    // get scroll position in px

    var body_x_position_m = body_x_position*(-1);
    console.log(body_x_position);

    document.body.style.position = "fixed";

    $('body').css({ top: body_x_position_m });

}

function enable_bk_scrl(){  

    document.body.style.position = "static";

    document.body.scrollTo(0, body_x_position);

    console.log(body_x_position);
}

— Arie S.
fonte

-3

Modifica semplicemente l'altezza del corpo <300 px (l'altezza della finestra mobile sullo spazio di terra va da circa 300 px a 500 px)

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

— Kristian Lepi
fonte

Non è una soluzione molto elegante e causerà problemi sui dispositivi iOS più grandi dei pixel specifici che finisci per scegliere. Dovrebbe essere usata una soluzione diversa.

— Badrush,