Le débordement: masqué appliqué à <body> fonctionne-t-il sur iPhone Safari?

131

Est-ce que overflow:hiddenappliqué pour <body>fonctionner sur iPhone Safari? Il semble que non. Je ne peux pas créer un wrapper sur l'ensemble du site Web pour y parvenir ...

Connaissez-vous la solution?

Exemple: j'ai une longue page, et je veux simplement cacher le contenu qui passe sous le "pli", et cela devrait fonctionner sur iPhone / iPad.

— Francesco
source

1

Cherchant désespérément à trouver la réponse à cela moi-même.

— mwilcox

115

J'ai eu un problème similaire et j'ai trouvé que s'appliquer overflow: hidden;aux deux htmlet a bodyrésolu mon problème.

html,
body {
    overflow: hidden;
}

Pour iOS 9, vous devrez peut-être utiliser ceci à la place: (Merci chaenu!)

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

— Alex Haas
source

12

Cela ne fonctionne pas sur iOS Safari. position: relative est également nécessaire.

— Kevin Borders

5

Oui, ajouter à la fois relatif et débordement à html + body

— wutang

3

cela ne fonctionne pas sur iOS 9, même en utilisant la position relative sur le corps et le html

— Charles John Thompson III

1

Un mot d'avertissement, le débordement caché sur la balise <html> interrompra l'événement de défilement de jQuery

— Brett Gregson

2

Cela ne fonctionne pas pour moi sur iOS 9, Safari. Corps toujours défilable, également après l'ajout position: relative.

— Edo

87

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

— laFunk
source

3

REMERCIER. TU. J'ai eu un gros problème lors de la transition d'éléments de l'extérieur de la fenêtre vers l'intérieur. Il se produirait un bug étrange où le contenu était étendu. C'était la solution pour moi!

— Eric

48

Dans mon cas, l'ajout de "position: relative" n'a pas aidé mais l'ajout de "position: fixed" a fonctionné.

— LeastOne

1

Yip cela a fonctionné. Je construis un site sur lequel ils veulent que la navigation mobile passe en revue le contenu - mais lorsqu'elle est ouverte, le contenu derrière la navigation en arrière-plan défile toujours. Les autres réponses avec la position, le débordement et la hauteur ont également fonctionné, mais avec la hauteur, la page saute vers le haut lorsque j'ouvre la navigation. Je suppose que c'est unique à ma situation, mais j'ai juste pensé le mentionner au cas où quelqu'un d'autre avec une navigation superposée aurait le même problème.

— moonunit7

Où va l'emballage? En quoi est-ce une réponse complète?

— Kugel

8

L'ajout d'une position fixe résout le problème, mais cela fait sauter la page en haut, ce qui est mauvais pour l'UX si vous l'implémentez en arrière-plan pendant que vous présentez un menu ou un modal. Pour faire une bonne UX, vous devez, avant de verrouiller la position, stocker la position de défilement de la page, puis la réappliquer après déverrouillage.

— mike

27

Certaines solutions énumérées ici présentaient d'étranges problèmes lors de l'étirement du défilement élastique. Pour résoudre ce problème, j'ai utilisé:

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

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

— Davey
source

4

C'est bien (fonctionne mieux dans mon cas que position: relative) cependant, la position de défilement est perdue après la restauration du style par défaut (par exemple la fermeture du menu).

— jmarceli

1

Pour la position de défilement, vous pouvez utiliser js (jquery dans cet exemple) faire quelque chose comme ceci:

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

Cela a vraiment fait la tique pour moi!

— D.Steinel

8

Eu ce problème aujourd'hui sur iOS 8 et 9 et il semble que nous devons maintenant ajouter de la hauteur: 100%;

Alors ajoutez

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

— chaenu
source

4

Combinant les réponses et les commentaires ici et cette question similaire ici fonctionné pour moi.

Donc poster une réponse globale.

Voici comment vous devez placer un div wrapper autour du contenu de votre site, juste à l'intérieur de la <body>balise.

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

Créez la classe wrapper comme ci-dessous.

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

J'ai aussi eu l'idée de cette réponse ici .

Et cette réponse ici a aussi matière à réflexion. Quelque chose qui fonctionnera probablement aussi bien sur les ordinateurs de bureau que sur les appareils.

— Devraj Gadhavi
source

C'était la solution pour moi.

— Roel Magdaleno

1

Cela fait défiler la page vers le haut pour moi lorsque le modal se ferme.

— Jason le

4

Il fonctionne dans le navigateur Safari.

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

— Sridhar
source

4

Pour moi ceci:

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

Cela ne suffisait pas, je n'ai pas fonctionné sur iOS sur Safari. J'ai également dû ajouter:

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

Pour que ça marche bien. Fonctionne bien maintenant :)

— Loosie94
source

2

J'ai travaillé avec <body>et<div class="wrapper">

Lorsque la fenêtre contextuelle s'ouvre ...

<body> obtient une hauteur de 100% et un débordement: caché

<div class="wrapper"> obtient la position: relative; débordement: caché; hauteur: 100%;

J'utilise JS / jQuery pour obtenir la position de défilement réelle de la page et stocker la valeur sous forme d'attribut de données au corps

Ensuite, je fais défiler jusqu'à la position de défilement dans le .wrapper DIV (pas dans la fenêtre)

Voici ma solution:

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

Cela fonctionne bien des deux côtés ... bureau et mobile (iOS).

Les conseils et améliorations sont les bienvenus :)

À votre santé!

— Toge
source

1

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

ajoutez ceci par défaut à votre css

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

toggleClasse cette classe en pour couper la page

lorsque vous désactivez cette classe, la première ligne rappelle la barre de défilement

— Longwinter
source

0

Oui, cela est lié aux nouvelles mises à jour de safari qui cassent votre mise en page maintenant si vous utilisez overflow: hidden pour s'occuper de la suppression des divs.

— Lee McAlilly
source

10

Pouvez-vous entrer plus en détail là-dessus ou citer une source? Cette réponse est peut-être correcte, mais ce n'est pas très utile.

— pjmorse

0

Cela s'applique, mais cela ne s'applique qu'à certains éléments du DOM. par exemple, cela ne fonctionnera pas sur une table, td ou certains autres éléments, mais cela fonctionnera sur une balise <DIV>.
par exemple:

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

Uniquement testé sous iOS 4.3.

Une modification mineure: vous feriez peut-être mieux d'utiliser le débordement: faites défiler pour que le défilement à deux doigts fonctionne.

— Adam
source

0

Pourquoi ne pas envelopper le contenu que vous ne souhaitez pas afficher dans un élément avec une classe et définir cette classe display:nonedans une feuille de style destinée uniquement à l'iPhone et aux autres appareils portables?

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

— S16
source

0

Voici ce que j'ai fait: je vérifie la position y du corps, puis je fixe le corps et j'ajuste le haut au négatif de cette position. À l'inverse, je rends le corps statique et je règle le défilement sur la valeur que j'ai enregistrée auparavant.

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

— Bélier.
source

-3

Changez simplement la hauteur du corps <300px (la hauteur de la fenêtre mobile sur l'espace terrestre est d'environ 300px à 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%;
}

— kristian lepi
source

Ce n'est pas une solution très élégante et causera des problèmes sur les appareils iOS qui sont plus grands que les pixels spécifiques que vous finissez par choisir. Une solution différente doit être utilisée.

— Badrush