Maison > interface Web > tutoriel CSS > Comment puis-je désactiver par programme le défilement des pages avec jQuery plus efficacement ?

Comment puis-je désactiver par programme le défilement des pages avec jQuery plus efficacement ?

Patricia Arquette
Libérer: 2024-12-19 20:02:10
original
406 Les gens l'ont consulté

How Can I Programmatically Disable Page Scrolling with jQuery More Effectively?

Désactivation par programme du défilement des pages avec jQuery : une approche alternative

Pour désactiver le défilement du corps de la page, vous avez initialement proposé de définir le débordement : caché pour le corps, capturant la position de défilement actuelle, puis la réinitialisant lors des événements de défilement. Même si votre idée fonctionnerait, ce n'est pas la méthode la plus efficace ou la plus transparente.

Une meilleure approche consiste à utiliser la propriété overflow pour les éléments html et body, en veillant à ce que le défilement soit désactivé. pour toute la page. Voici le code jQuery modifié :

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});
Copier après la connexion

Ce code définit la propriété overflow sur masquée, empêchant la page de défiler dans n'importe quelle direction. Il définit également la hauteur à 100 % pour éviter tout écart vertical potentiel.

Pour restaurer le défilement, inversez simplement ces valeurs :

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});
Copier après la connexion

Cette méthode a été testée et confirmée pour fonctionner efficacement dans les navigateurs Firefox et Chrome. Bien que l'approche position : fixe ait ses propres avantages, elle peut ne pas convenir à votre cas d'utilisation spécifique. Par conséquent, cette solution alternative offre un moyen complet de désactiver le défilement des pages par programmation avec jQuery.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal