Comment puis-je détecter la fin du défilement dans jQuery ?

jQuery : Détecter la fin du défilement

Introduction :
Dans le développement Web, la gestion du défilement des utilisateurs peut être cruciale pour améliorer l'expérience utilisateur . La fonction scroll() de jQuery fournit un moyen pratique de détecter les événements de défilement. Cependant, comprendre quand un utilisateur a arrêté le défilement est également vital pour certains scénarios.

Comprendre le problème :
Le code fourni montre comment supprimer une classe lors du défilement. Cependant, l'OP a l'intention de rajouter la classe lorsque le défilement s'arrête. En effet, la classe supprimée entre en conflit avec un effet de transparence souhaité lors du défilement.

Détection de la fin du défilement :
Pour y parvenir, nous devons détecter quand le défilement a cessé. Voici une solution utilisant la fonction scroll() avec un timeout :

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

Ce code définit un timeout de 250 millisecondes. Lorsque l'utilisateur fait défiler, le délai d'attente est réinitialisé. Si l'utilisateur arrête le défilement pendant 250 millisecondes, la fonction de délai d'attente se déclenche, indiquant la fin du défilement.

Solution avancée :
Pour les situations où un timing précis est crucial, envisagez d'utiliser jQuery. unévénement.js. Cette extension améliore la gestion des événements de jQuery pour permettre aux gestionnaires d'événements d'être déclenchés uniquement après un délai spécifique.

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

Avec cette extension, vous pouvez spécifier un délai de 250 millisecondes, déclenchant le rappel uniquement après l'événement de défilement. arrêté pendant cette durée.

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!