Surmonter le « défilement excessif » dans les pages Web

Dans Chrome pour Mac, le « défilement excessif » est un effet indésirable qui permet aux utilisateurs de faire glisser une page au-delà de sa zone d'affichage normale, comme on le voit sur l'image fournie. Pour résoudre ce problème et améliorer l'expérience utilisateur, envisagez les deux méthodes suivantes :

Méthode 1 : Restriction du surdéfilement

Si vous souhaitez désactiver entièrement le surdéfilement, utilisez le code CSS suivant :

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

La propriété overflow: Hidden sur l'élément empêche tout contenu de débordement de devenir visible, délimitant ainsi la page dans sa fenêtre d'affichage. La propriété overflow: auto sur l'élément

Méthode 2 : personnalisation du comportement de sur-défilement

Pour personnaliser et contrôler le comportement de sur-défilement, utilisez la propriété touch-action :

body {
    -webkit-touch-callout: none;
    -webkit-touch-action: manipulation;
}

Le code ci-dessus empêche la sélection de texte tout en permettant une manipulation tactile générale, y compris le défilement dans la hauteur définie de la page. Pour un contrôle plus granulaire, vous pouvez spécifier des valeurs d'action tactile précises, telles que pan-x pour autoriser uniquement le défilement horizontal.