Comment puis-je détecter lorsqu'un utilisateur arrête de faire défiler à l'aide de jQuery ?

Événement de défilement de jQuery pour détecter lorsque l'utilisateur arrête de défiler

L'événement scroll() de jQuery est utile pour détecter quand un utilisateur fait défiler. Cependant, pour certains scénarios, il est également nécessaire de savoir quand le défilement s'est arrêté.

Solution :

Pour y parvenir, on peut utiliser une combinaison de scroll( ), clearTimeout() et setTimeout().

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});

Voici comment procéder fonctionne :

1. Enregistrez un gestionnaire d'événements scroll() sur la fenêtre.
2. À l'intérieur du gestionnaire, effacez tout minuteur de défilement existant (clearTimeout()).
3. Définissez une nouvelle minuterie de défilement utilisant setTimeout() avec un délai (par exemple, 250 ms).
4. Si l'événement de défilement est déclenché avant la minuterie expire, le minuteur existant est effacé (clearTimeout()) et un nouveau minuteur est défini.
5. Si le minuteur expire sans aucun événement de défilement, cela signifie que l'utilisateur a arrêté le défilement.

Amélioration à l'aide de l'extension jQuery :

Une approche alternative consiste à utiliser une extension jQuery appelée "jQuery.unevent.js":

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

En passant un délai comme dernier paramètre à la méthode on(), nous pouvons spécifier l'intervalle minimum entre les déclencheurs d'événements.

Avantages de cette approche :

• Elle fournit un moyen propre et concis de gérer l'arrêt du défilement événements.
• Le délai peut être ajusté pour correspondre aux exigences de l'application.
• Il peut être utilisé pour déclencher des actions lorsque le défilement est arrêté, comme la restauration d'effets de transparence ou la suppression d'éléments de superposition.

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!