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

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

Linda Hamilton
Linda Hamiltonoriginal
2024-12-30 20:01:14293parcourir

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

Désactivation du défilement de page programmatique avec jQuery

En JavaScript, la désactivation du défilement de page est une tâche courante. Une approche consiste à utiliser les capacités de manipulation CSS de jQuery. Cette méthode nécessite trois étapes :

  1. Désactivez le défilement des pages en définissant body{ overflow: Hidden; } dans le CSS.
  2. Capturez la position de défilement actuelle à l'aide de scrollTop() et scrollLeft().
  3. Liez un gestionnaire d'événement de défilement au corps et réinitialisez la position de défilement aux valeurs capturées.

Une approche alternative

L'approche fournie empêche efficacement le défilement des pages. Cependant, il existe une solution plus simple et plus complète :

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

Ce code désactive complètement le défilement des pages en définissant les balises html et body pour avoir un débordement masqué et une hauteur fixe de 100 %. Pour restaurer le défilement, réinitialisez simplement les propriétés CSS à leurs valeurs d'origine.

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});

Cette solution a été testée et confirmée pour fonctionner efficacement dans les navigateurs Firefox et Chrome.

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!

Déclaration:
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