Comment désactiver le défilement sur mobile Safari ?

Question

J'ai une longue page et je veux cacher le contenu qui se trouve en dessous du "pli", et cela devrait fonctionner sur iPhone/iPad.

overflow:hidden appliqué à ne semble pas fonctionner sur mobile Safari. Je ne peux pas créer un conteneur sur l'ensemble du site web pour y parvenir...

Connaissez-vous la solution ?

Answer 1

J'ai eu un problème similaire et j'ai trouvé que l'application overflow: hidden; à la fois à html et à body a ré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%;
}

Answer 2

corps {
  position:relative; // c'est tout
  overflow:hidden;
}

Answer 3

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

Answer 4

Oui, cela est lié aux nouvelles mises à jour dans Safari qui cassent actuellement votre mise en page si vous utilisez overflow: hidden pour gérer le nettoyage des divs.

Answer 5

Il s'applique, mais uniquement à certains éléments dans le DOM. Par exemple, cela ne fonctionnera pas sur un tableau (table), une cellule de tableau (td) ou certains autres éléments, mais cela fonctionnera sur une balise <DIV>.
Par exemple:

Uniquement testé sur iOS 4.3.

Une légère modification : il serait peut-être préférable d'utiliser overflow:scroll afin que le défilement à deux doigts fonctionne.