Comment désactiver le défilement dans Mobile Safari ?

Désactiver le défilement sur Safari mobile

Face à de longues pages qui débordent au-delà de la zone visible, il devient nécessaire de désactiver le défilement sur Safari mobile pour offrir une expérience utilisateur fluide. Cet article relève ce défi en explorant des solutions pour empêcher le contenu de s'étendre sous le « pli » de la page sur les appareils iOS.

Débordement corporel : inefficacité cachée

Application du « débordement : Hidden" à l'élément body restreint généralement le défilement dans la plupart des navigateurs. Cependant, cette approche ne fonctionne pas sur Safari mobile. Cette limitation pose un défi en masquant le contenu qui dépasse la fenêtre d'affichage sur ces appareils.

Html et Body Overflow : solution cachée

Pour résoudre ce problème, il est recommandé de appliquer "débordement: caché;" aux éléments HTML et body. Cette approche désactive efficacement le défilement sur Safari mobile, garantissant ainsi que le contenu est confiné dans la zone visible du navigateur.

Correction spécifique à iOS 9

Pour les utilisateurs d'iOS 9, un une légère modification est nécessaire pour obtenir le résultat souhaité. En plus de "overflow:hidden;", ajoutez "position:relative;" et "hauteur : 100 % ;" aux règles CSS pour le HTML et le corps. Ces ajustements garantissent une désactivation appropriée du défilement sur les appareils iOS 9.

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!