Maison > interface Web > js tutoriel > Comment puis-je détecter l'arrêt du défilement avec jQuery ?

Comment puis-je détecter l'arrêt du défilement avec jQuery ?

Patricia Arquette
Libérer: 2024-12-12 22:26:15
original
893 Les gens l'ont consulté

How Can I Detect When Scrolling Stops Using jQuery?

Méthode jQuery scroll() : Détection de l'arrêt du défilement

La méthode scroll() de jQuery vous permet d'exécuter une fonction lorsqu'un élément défile. Cependant, il ne fournit pas un moyen simple de détecter l'arrêt du défilement.

Détection de la fin du défilement

Pour déterminer quand le défilement a cessé, nous pouvons utiliser un gestionnaire d'événements chronométré. Voici un exemple :

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        // Scrolling has stopped
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});
Copier après la connexion

Dans ce code, nous définissons une minuterie et la réinitialisons à chaque fois que l'utilisateur fait défiler. Si le minuteur expire, cela indique que le défilement s'est arrêté.

Extension Unevent.js

Alternativement, nous pouvons utiliser la fonction étendue on() fournie par l'extension jQuery Unevent.js :

$(window).on('scroll', function(e) {
    console.log(e.type + '-event was 250ms not triggered');
}, 250);
Copier après la connexion

Unevent.js nous permet de spécifier un paramètre de délai pour les gestionnaires d'événements. De cette façon, le gestionnaire ne se déclenche que si l'événement ne s'est pas produit dans l'intervalle donné.

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