web-dev-qa-db-fra.com

Vous capturez l'événement "scroll down"?

Je conçois une page Web très simple (HTML uniquement), la seule "fonctionnalité" que je veux implémenter est de faire quelque chose lorsque l'utilisateur fait défiler la page, existe-t-il un moyen de capturer cet "événement" d'une manière ou d'une autre?

javascripthtmleventsjavascript-eventsscroll
34
Artemix

Juste pour être complet, il existe une autre solution utilisant un autre framework JS (Mootools)

window.addEvent('scroll',function(e) {
    //do stuff
});
20
stecb

Si vous ne voulez pas utiliser jQuery (ce que vous pourriez ne pas faire pour une page HTML très simple), vous pouvez le faire en utilisant Javascript standard:

<script>
function scrollFunction() {
    // do your stuff here;
}

window.onscroll = scrollFunction;
</script>

Vous avez mentionné que vous vouliez faire quelque chose quand ils défilent bas la page - l'événement onscroll déclenche le défilement dans toutes les directions, soit sur les axes x ou y, donc votre fonction sera appelée à tout moment ils défilent.

Si vous voulez vraiment qu'il n'exécute votre code que lorsqu'ils défilent vers le bas de la page, vous devez conserver la position de défilement précédente par rapport à chaque fois que onscroll est appelé.

42
Anthony Grist

Vous ne pouvez pas le faire avec juste du HTML, vous devrez utiliser Javascript. Je recommande d'utiliser jQuery , pour que votre solution ressemble à ceci:

$(document).ready(function() {
    $(window).scroll(function() {
      // do whatever you need here.
    });
});

Si vous ne voulez pas ou ne pouvez pas utiliser jQuery , vous pouvez utiliser la solution onscroll publiée par Anthony.

21
Chuck Callebs

Une meilleure façon est non seulement de vérifier les événements de défilement, mais également le défilement de la direction comme ci-dessous;

$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
    console.log('Scroll up');
}
else {
    console.log('Scroll down');
}
});
20
Joe Ng'ethe

tu peux simplement utiliser ça

window.addEvent('scroll',function(e) {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            // enter code here
        }
});
3
sajad saderi

Cela fonctionne pour moi.

var previousPosition

$(window).scroll(function(){
  var currentScrollPosition=$(window).scrollTop() + $(window).height()
  if (currentScrollPosition>previousScrollPosition) {
    console.log('down')
  }else if(currentScrollPosition<previousScrollPosition){
    console.log('up')
  }
  previousScrollPosition=currentScrollPosition
});
0
Alvin Lau