html désactiver le glissement

HTML désactive le glissement - comment l'implémenter ?

Dans la conception et le développement de sites Web, le glissement est une méthode d'interaction importante. Cependant, dans certains cas, nous souhaitons interdire le glissement de page Web. Cette exigence est généralement observée dans les scénarios suivants :

1. Lorsqu'une page Web apparaît, nous ne voulons pas que les utilisateurs voient le contenu de la page Web via des opérations de glissement ;
Dans certains scénarios d'application spéciaux, il est nécessaire d'empêcher les utilisateurs de faire glisser la page.

Alors, comment éviter le glissement en HTML ? Cet article vous présentera deux méthodes.

Méthode 1 : Utiliser les propriétés CSS

Dans le fichier CSS, nous pouvons utiliser l'instruction suivante pour désactiver le glissement :

body{
   overflow: hidden;
}

Ce code CSS masque la barre de défilement de la page, obtenant ainsi l'effet de désactiver le glissement. Cette méthode convient aux situations dans lesquelles une fenêtre de taille fixe doit apparaître au milieu de la page pour empêcher les utilisateurs de continuer à glisser et à parcourir.

Cependant, cette méthode présente également quelques inconvénients. Il masque uniquement la barre de défilement, mais n'interdit pas à l'utilisateur de faire défiler la page. Si l'utilisateur utilise la molette du clavier ou de la souris pour glisser, des problèmes surviendront toujours.

Méthode 2 : Utiliser le code JavaScript

En plus d'utiliser les propriétés CSS, nous pouvons également utiliser le code JavaScript pour empêcher le HTML de glisser.

var scrollTop;
function stopScroll(){
    scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.overflow='hidden';
    document.body.style.position='fixed';
    document.body.style.top=-scrollTop+'px';
}
function allowScroll(){
    document.body.style.overflow='auto';
    document.body.style.position='';
    document.body.style.top='';
    document.body.scrollTop = scrollTop;
    document.documentElement.scrollTop = scrollTop;
}

Le code ci-dessus définit deux fonctions stopScroll() et allowScroll(), qui sont utilisées respectivement pour arrêter et autoriser le glissement de page. Parmi eux, la fonction stopScroll() est utilisée pour interdire le défilement des pages, et la fonction allowScroll() est utilisée pour restaurer la fonction de défilement des pages.

Cette méthode peut interdire complètement à l'utilisateur de glisser sur la page et garantit également que la position de glissement de l'utilisateur est restaurée avant le chargement de la page.

Cependant, veuillez noter que cette méthode peut ne pas convenir à tous les scénarios d'application et à tous les navigateurs. Certains navigateurs peuvent ne pas prendre entièrement en charge JavaScript, ce qui empêche ce code de fonctionner correctement.

Conclusion

La désactivation du glissement en HTML est une exigence courante en matière de conception Web. Cet article explique deux méthodes différentes, utilisant les propriétés CSS et le code JavaScript. Les lecteurs peuvent choisir une méthode appropriée pour interdire le glissement de page en fonction des besoins réels ; en même temps, ils doivent également faire attention aux limites de la méthode et à la compatibilité du navigateur.

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!