web-dev-qa-db-fra.com

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

Est-ce que overflow:hidden appliqué à <body> fonctionne sur iPhone Safari? Il semble que non . Je ne peux pas créer d'habillage sur tout le site Web pour y parvenir ...

Connaissez-vous la solution?

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

iphonecssipadsafarioverflow
101
Francesco

J'ai eu un problème similaire et j'ai constaté qu'appliquer overflow: hidden; à la fois html et body résolvait mon problème.

html,
body {
    overflow: hidden;
}

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

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}
90
Alex Haas
body {
  position:relative; // that's it
  overflow:hidden;
}
63
laFunk

Certaines solutions énumérées ici présentaient des problèmes étranges 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/

19
Davey

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

Alors ajoutez

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

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

Donc, poster comme une réponse complète.

Voici comment vous devez insérer une division wrapper autour du contenu de votre site, juste à l'intérieur de la balise <body>.

 <!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 également des pistes de réflexion. Quelque chose qui fonctionnera probablement aussi bien sur les ordinateurs de bureau que sur les périphériques.

4
Devraj Gadhavi

Son travail dans le navigateur Safari.

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

Pour moi ceci:

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

Ce n'était pas assez, je n'ai pas fonctionné sur iOS sous Safari. J'ai aussi dû ajouter:

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

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

1
Loosie94

Pourquoi ne pas envelopper le contenu que vous ne voulez pas afficher dans un élément avec une classe et définir cette classe sur display:none dans une feuille de style destinée uniquement à l'iPhone et aux autres périphériques de poche?

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

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

Quand la popup s'ouvre ...

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

<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 en tant que data-attribut au corps

Ensuite, je fais défiler jusqu'à la position de défilement dans le DIV. Wrapper (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 ... desktop et mobile (iOS).

Tipps et améliorations sont les bienvenues :)

À votre santé!

1
Tobias Gerlach

Oui, cela est lié aux nouvelles mises à jour dans safari qui cassent votre mise en page maintenant si vous utilisez overflow: hidden pour prendre en charge le nettoyage des divs. 

0
Lee McAlilly
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%;
}

toggleClass cette classe pour couper la page

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

0
Longwinter

Voici ce que j'ai fait: Je vérifie la position du corps en y, puis je fixe le corps et ajuste le haut au négatif de cette position. Au revers, je rends le corps statique et mets 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);
}
0
Arie S.

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 d'autres éléments, mais 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;"/>

Testé uniquement sous iOS 4.3.

Une modification mineure: il serait peut-être préférable d'utiliser le débordement: faites défiler pour que le défilement à deux doigts fonctionne.

0
adam

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