Est-ce que overflow: hidden s'applique à travailler sur iPhone Safari?

Ne overflow:hidden appliqué à <body> travailler sur iPhone Safari? Il ne semble pas. Je ne peux pas créer un emballage sur tout le site pour y arriver...

connaissez-vous la solution?

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

92
demandé sur Ian Kemp 2010-06-15 20:58:20

13 réponses

j'ai eu un problème similaire et j'ai trouvé que l'application de overflow: hidden; à la fois html et body a résolu mon problème. 

html,
body {
    overflow: hidden;
}

pour iOS 9, Vous pouvez utiliser ceci à la place: (Merci chaenu!) 

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}
86
répondu Alex Haas 2016-01-08 18:44:17 
body {
  position:relative; // that's it
  overflow:hidden;
}
57
répondu laFunk 2018-05-08 19:30:50

certaines des solutions énumérées ici ont eu des problèmes étranges lors de l'étirement du défilement élastique. Pour corriger ce que 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 /

17
répondu Davey 2017-01-25 11:14:50

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

ainsi ajouter 

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}
5
répondu chaenu 2016-01-07 16:07:21

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

ainsi affichant comme une réponse globale.

Voici comment vous avez besoin de mettre une div wrapper autour de votre contenu de site, juste à l'intérieur de la étiquette <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éer 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 obtenu un peu de nourriture pour la pensée. Quelque chose qui fonctionnera probablement aussi bien dans les ordinateurs de bureau que dans les appareils.

4
répondu Devraj Gadhavi 2017-05-23 12:03:06

pourquoi ne pas envelopper le contenu que vous ne voulez pas montrer dans un élément avec une classe et mettre cette classe à display:none dans une feuille de style destiné uniquement pour l'iphone et d'autres appareils portatifs? 

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->
1
répondu S16 2016-01-21 09:19:07

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

quand popup 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 réelle de la page et stocker la valeur comme attribut de données au corps

puis je fais défiler vers le scrollposition dans le .wrapper DIV (pas de 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 les améliorations sont les bienvenues :)

santé!

1
répondu Tobias Gerlach 2017-11-08 23:01:45

son fonctionnement dans Safari browser. 

html,
body {
  overflow: hidden;
  position: fixed
}
1
répondu Sridhar 2017-11-15 09:57:13

Oui, c'est lié aux nouvelles mises à jour dans safari qui cassent votre mise en page Maintenant si vous utilisez overflow: hidden pour prendre soin de clearing divs.

0
répondu Lee McAlilly 2011-05-03 15:52:15

Elle s'applique, mais elle ne s'applique qu'à certains éléments dans le DOM. par exemple, il ne fonctionnera pas sur une table, td, ou d'autres éléments, mais il fonctionnera sur une balise

.

par exemple: 

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

testé uniquement dans l'iOS 4.3.

une édition mineure: il est peut-être préférable d'utiliser overflow:scroll pour que deux doigts-scrolling ne fonctionne.

0
répondu adam 2011-08-20 18:17:40 
html {
  position:relative;
  top:0px;
  left:0px;
  overflow:auto;
  height:auto
}

ajouter par défaut à votre css 

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

toggleClass cette classe afin de couper la page

quand vous éteignez cette classe première ligne appellera barre de défilement arrière

0
répondu Longwinter 2017-07-27 11:47:19

pour moi ceci: 

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

N'était pas suffisant, je n'ai pas travaillé sur iOS avec sur Safari. J'ai aussi dû ajouter: 

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

pour que ça marche. Fonctionne très bien maintenant :)

0
répondu Loosie94 2017-12-18 18:45:36

il suffit de changer la hauteur du corps < 300px (la hauteur de vue 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%;
}
0
répondu kristian lepi 2018-01-19 11:08:29