Maison > interface Web > tutoriel CSS > Comment puis-je désactiver et réactiver le défilement des pages avec jQuery ?

Comment puis-je désactiver et réactiver le défilement des pages avec jQuery ?

Mary-Kate Olsen
Libérer: 2024-12-24 14:10:14
original
817 Les gens l'ont consulté

How Can I Disable and Re-enable Page Scrolling with jQuery?

Comment désactiver le défilement des pages avec jQuery

La désactivation du défilement des pages peut être obtenue par diverses méthodes, notamment en définissant le débordement : caché sur le élément du corps. Cependant, il existe des approches plus efficaces et plus précises utilisant jQuery.

Une de ces méthodes consiste à se lier à l'événement de défilement du corps et à réinitialiser le scrollTop/scrollLeft à une valeur capturée. Bien que cette technique fonctionne dans la plupart des scénarios, elle peut ne pas gérer les cas extrêmes où le contenu de la page est plus grand que la fenêtre d'affichage.

Pour une solution plus robuste, envisagez d'utiliser le code jQuery suivant :

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

Ce code désactive complètement le défilement sur les éléments HTML et body en définissant overflow: caché et en garantissant une page pleine hauteur.

Pour restaurer le défilement, inversez simplement le changements :

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

Cette approche est plus fiable et cohérente dans tous les navigateurs, garantissant que la page reste défilable même lorsque le contenu est plus grand que la fenêtre d'affichage.

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