Détecter si l'événement de défilement a été créé par l'utilisateur

Question

Est-il possible de savoir si un événement de défilement a été déclenché par le navigateur ou par l'utilisateur? Plus précisément, lors de l'utilisation du bouton retour, un navigateur peut sauter à la dernière position de défilement connue. Si je lie un événement de défilement, comment puis-je savoir si cela a été causé par l'utilisateur ou par le navigateur?

$(document).scroll( function(){ 
    //qui a fait cela ?!
});

Je distingue trois types de situations qui provoquent un défilement dans un navigateur.

1. L'utilisateur effectue une action. Par exemple, utilise la molette de la souris, les touches de direction, les touches de page haut/bas, les touches de début/fin, clique sur la barre de défilement ou en fait glisser le curseur.
2. Le navigateur défile automatiquement. Par exemple, lorsque vous utilisez le bouton retour dans votre navigateur, il sautera automatiquement à la dernière position de défilement connue.
3. Le JavaScript effectue un défilement. Par exemple, element.scrollTo(x,y).

Answer 1

Malheureusement, il n'y a pas de moyen direct de le dire.

Je dirais que si vous pouvez redessiner votre application pour qu'elle ne dépende pas de ce type de flux, allez-y.

Si ce n'est pas le cas, une astuce à laquelle je pense est de suivre les scrolls initiés par l'utilisateur et de vérifier cela pour voir si le scroll a été déclenché par le navigateur ou par l'utilisateur.

Voici un exemple que j'ai mis en place qui le fait assez bien (à l'exception des navigateurs où jQuery history pose problème).

Vous devez exécuter cela localement pour pouvoir le tester complètement (jsFiddle/jsbin ne sont pas adaptés car ils encapsulent le contenu dans un iFrame).

Voici les cas de test que j'ai validés:

• Chargement de la page - userScroll est false
• Défilement avec la souris/le clavier - userScroll devient true
• Cliquer sur le lien pour sauter en bas de page - userScroll devient false
• Cliquer sur Retour/Avant - userScroll devient false;

---

     bonjour  
     cliquez ici pour descendre  

     juste là  

var userScroll = false;     

function mouseEvent(e) { 
    userScroll = true; 
} 

$(function() { 

    // réinitialiser le drapeau sur Retour/Avant
    $.history.init(function(hash){ 
        userScroll = false; 
    }); 

    $(document).keydown(function(e) { 
        if(e.which == 33        // page up 
           || e.which == 34     // page dn 
           || e.which == 32     // espace
           || e.which == 38     // haut 
           || e.which == 40     // bas 
           || (e.ctrlKey && e.which == 36)     // ctrl + home 
           || (e.ctrlKey && e.which == 35)     // ctrl + fin 
          ) { 
            userScroll = true; 
        } 
    }); 

    // détecter le défilement par l'utilisateur via la souris
    // Mozilla/Webkit 
    if(window.addEventListener) {
        document.addEventListener('DOMMouseScroll', mouseEvent, false); 
    }

    //pour IE/OPERA etc 
    document.onmousewheel = mouseEvent; 

    // réinitialiser le drapeau lorsque les ancres nommées sont cliquées
    $('a[href*=#]').click(function() { 
        userScroll = false;
    }); 

      // détecter le défilement par le navigateur/l'utilisateur
    $(document).scroll( function(){  
        console.log('Défilement initié par ' + (userScroll == true ? "l'utilisateur" : "le navigateur"));
    });
}); 

Notes:

• Cela ne suit pas le défilement lorsque l'utilisateur fait glisser la barre de défilement avec la souris. Cela peut être ajouté avec un peu plus de code, que j'ai laissé en exercice pour vous.
• Les event.keyCodes peuvent varier en fonction du système d'exploitation, vous devrez donc les adapter en conséquence.

J'espère que cela vous aidera!

Answer 2

Au lieu d'essayer de capturer tous les événements utilisateur, il est beaucoup plus facile de faire l'inverse et de gérer uniquement les événements programmés - et d'ignorer ceux-ci

Par exemple, ce type de code fonctionnerait:

// Élément qui doit être défilé
var myElement = document.getElementById('my-container');

// Drapeau pour indiquer si le changement était programmé ou par l'utilisateur
var ignoreNextScrollEvent = false;

function setScrollTop(scrollTop) {
    ignoreNextScrollEvent = true;
    myElement.scrollTop = scrollTop
}

myElement.addEventListener('scroll', function() {
    if (ignoreNextScrollEvent) {
        // Ignorer cet événement car il a été fait de manière programmée
        ignoreNextScrollEvent = false;
        return;
    }

    // Traiter l'événement initié par l'utilisateur ici
});

Ensuite, lorsque vous appelez setScrollTop(), l'événement de défilement sera ignoré, tandis que si l'utilisateur fait défiler avec la souris, le clavier ou tout autre moyen, l'événement sera traité.

Answer 3

Aussi loin que je sache, il est impossible (sans aucun travail) de dire si un événement de défilement a été déclenché par un "utilisateur" ou par d'autres moyens.

Vous pourriez essayer (comme d'autres l'ont mentionné) de capturer les événements de la molette de la souris, puis probablement essayer de capturer l'événement keydown sur les touches qui peuvent déclencher un défilement (flèches, espace etc.) tout en vérifiant quel élément est actuellement sélectionné, car par exemple vous ne pouvez pas faire défiler en utilisant les touches de direction tout en tapant dans un champ de saisie. En général, ce serait un script complexe et confus.

En fonction de la situation à laquelle vous êtes confronté, vous pourriez, je suppose, "inverser la logique", et au lieu de détecter les événements de défilement déclenchés par l'utilisateur, simplement vous connecter à tous les défilements effectués de manière programmatique et traiter tout événement de défilement non effectué par votre code comme effectué par un utilisateur. Comme je l'ai dit, cela dépend de la situation et de ce que vous essayez d'atteindre.

Answer 4

Oui, c'est 100% possible. Je l'utilise actuellement dans une application où IE n'est pas une exigence - uniquement destinée aux clients. Lorsque mon application Backbone lance une animation qui modifie le défilement, le défilement se produit mais ne déclenche pas ces captures d'événements. Cela a été testé dans les dernières versions de FF, Safari et Chrome.

$('html, body').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(evt) {
  // détecter uniquement l'initiation par l'utilisateur, pas par une .animate cependant
    if (evt.type === 'DOMMouseScroll' || evt.type === 'keyup' || evt.type === 'mousewheel') {
    // haut
    if (evt.originalEvent.detail < 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta > 0)) { 
    // bas
    } else if (evt.originalEvent.detail > 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta < 0)) { 
  }
}
});

Answer 5

Essayez d'utiliser les événements Mousewheel et DOMMouseScroll à la place. Voir http://www.quirksmode.org/dom/events/scroll.html