Comment puis-je empêcher le défilement excessif sur mes pages Web ?

Empêcher le défilement excessif dans les pages Web

Le "défilement excessif" est une fonctionnalité des navigateurs modernes qui permet aux utilisateurs de faire défiler au-delà de la fin d'une page Web. , révélant un aperçu du contenu sous-jacent. Bien que cet effet puisse être utile dans certains scénarios, il peut également être ennuyeux ou déroutant dans d'autres.

Si vous souhaitez désactiver le défilement excessif sur vos pages Web, il existe deux approches principales :

Méthode 1 : désactiver complètement le défilement excessif

La solution acceptée proposée dans le fil de discussion auquel vous avez lié n'a pas fonctionné pour tous les utilisateurs. Cependant, une méthode plus fiable consiste à utiliser les règles CSS suivantes :

<code class="css">html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}</code>

Ce code empêche le défilement excessif en limitant le contenu débordant dans la fenêtre du navigateur. Il définit la propriété overflow de l'élément html sur masqué, ce qui masque tout contenu s'étendant au-delà de la plage de la barre de défilement. La propriété de débordement de l'élément body est définie sur auto, permettant le défilement vertical dans la page elle-même mais l'empêchant de s'étendre au-delà de la fenêtre du navigateur.

Méthode 2 : contrôler le défilement excessif pour des éléments spécifiques

Si vous souhaitez uniquement désactiver le défilement excessif pour des éléments spécifiques de votre page, vous pouvez utiliser la propriété -webkit-overflow-scrolling. Cette propriété est prise en charge par Chrome, Safari et d'autres navigateurs qui utilisent le moteur de rendu WebKit :

<code class="css">.my-container {
    -webkit-overflow-scrolling: touch;
}</code>

Le paramètre -webkit-overflow-scrolling sur touch empêche le défilement excessif dans l'élément lui-même, permettant aux utilisateurs de faire défiler en douceur ce conteneur spécifique mais pas au-delà de ses limites.

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!