Capturing the “scroll down” event?

Question

I\'m designing a very simple web page (HTML only), the only \"feature\" I want to implement is to do something when the user scrolls down the page, is there a way to capture

Answer 1

above answers are correct. Here's the vanilla Javascript approach.

document.addEventListener("mousewheel", function(event){
  if(event.wheelDelta >= 0){
    console.log("up")
  }else{
    console.log("down")
  }
})

Answer 2

Just for completeness, there's another solution using another JS framework (Mootools)

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

Answer 3

A better way is to not only check for scroll events but also for direction scrolling like below;

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

Answer 4

You can't do it with just HTML, you'll need to use Javascript. I recommend using jQuery, so your solution can look like this:

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

If you don't want or are unable to use jQuery, you can use the onscroll solution posted by Anthony.

Answer 5

This works for me.

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
});

Answer 6

u can simply use this

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