Maison >interface Web >tutoriel CSS >Comment puis-je empêcher le défilement et masquer le contenu au-delà de la fenêtre sur les appareils iOS ?

Comment puis-je empêcher le défilement et masquer le contenu au-delà de la fenêtre sur les appareils iOS ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-14 08:45:15931parcourir

How Can I Prevent Scrolling and Hide Content Beyond the Viewport on iOS Devices?

Masquer le contenu Beyond the Fold sur iPhone/iPad

Désactiver le défilement sur Safari mobile pour les longues pages peut être un défi. Application du débordement : masqué dans le champ l’élément seul peut ne pas suffire. Voici une solution qui fonctionne :

Solution :

Appliquer le débordement : caché ; aux éléments html et body :

html,
body {
    overflow: hidden;
}

Pour iOS 9, vous pourriez avoir besoin de ceci à la place :

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

Cela empêchera la page de défiler et masquera tout contenu qui s'étend au-delà la fenêtre. Notez que cette solution peut ne pas convenir à tous les sites Web, car elle peut casser certaines fonctionnalités, telles que les curseurs ou les listes déroulantes, qui reposent sur le défilement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn