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

Vous pouvez vérifier la position de défilement dès que la page est prête. Lorsque vous déclenchez l'événement de défilement, vérifiez que la position de défilement est différente de celle qu'elle était lorsque la page a été chargée. Enfin, assurez-vous de vider la valeur stockée une fois que la page a été défilée.

$(function () {
    var loadScrollTop = ($(document).scrollTop() > 0 ? $(document).scrollTop() : null);
    $(document).scroll(function (e) {
        if ( $(document).scrollTop() !== loadScrollTop) {
            // code de défilement ici!
        }
        loadScrollTop = null;
    });
});

Answer 2

Il existe une autre manière de séparer le défilement créé par l'utilisateur : vous pouvez utiliser les gestionnaires d'événements alternatifs, par exemple 'mousewheel', 'touchmove', 'keydown' avec les codes 38 et 40 pour le défilement avec les flèches, pour défilement avec la barre de défilement - si l'événement 'scroll' est déclenché simultanément avec 'mousedown' jusqu'à l'événement 'mouseup'.

Answer 3

Plus d'informations dans Javascript Tutorial - The Scroll Wheel

Answer 4

En ce qui concerne :

Plus précisément, lorsque vous utilisez le bouton retour d'un navigateur, celui-ci peut sauter à la dernière position de défilement connue.

Cela se déclenche très rapidement, juste après le rendu de la page. Vous pouvez simplement retarder l'écoute de l'événement de défilement d'une seconde ou plus.

Answer 5

Très utile. Voici une version coffeescript pour ceux qui le préfèrent.

$ ->
  S.userScroll = false

  # réinitialiser le drapeau sur retour/arrière
  if $.history?
    $.history.init (hash) ->
      S.userScroll = false

  mouseEvent = (e)->
    S.userScroll = true

  $(document).keydown (e) ->
    importantKey =  (e.which == 33 or        # page haut
      e.which == 34 or    # page bas
      e.which == 32 or    # espace
      e.which == 38 or    # haut
      e.which == 40 or    # bas
      (e.ctrlKey and e.which == 36) or    # ctrl + début
      (e.ctrlKey and e.which == 35)    # ctrl + fin
    )
    if importantKey
      S.userScroll = true;

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

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