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 that "event" somehow?

Answer 1

If you don't want to use jQuery (which you might not do for a very simple HTML page), you can accomplish this using regular Javascript:

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

window.onscroll = scrollFunction;
</script>

You mentioned that you wanted to do something when they scroll down the page - the onscroll event fires off scrolling in any direction, in either the x- or y-axis, so your function will be called any time they scroll.

If you really want it to only run your code when they scrolled down the page, you'd need to preserve the previous scroll position to compare against whenever onscroll gets called.

Answer 2

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 3

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

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

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

For capturing mouse wheel event since mousewheel event is Deprecated and Non-standard you can use wheel event instead. You can read the documentation here

window.onwheel = e => {
  if(e.deltaY >= 0){
    // Scrolling Down with mouse
    console.log('Scroll Down');
  } else {
    // Scrolling Up with mouse
    console.log('Scroll Up');
  }
}

Answer 6

Here is my solution in pure JavaScript, be careful the only problem is that it is executed a lot of times. Sorry for the spelling I use google translate, I am french ;)

var scrollBefore = 0;

window.addEventListener('scroll',function(e){
    const scrolled = window.scrollY;

    if(scrollBefore > scrolled){
        console.log("ScrollUP");
        scrollBefore = scrolled;
        //Desired action
    }else{
        scrollBefore = scrolled;
        console.log("ScrollDOWN");
        //Desired action
    }

})

Answer 7

u can simply use this

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

Answer 8

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

Update: Deprecated

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event

Answer 9

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 10

/**
 * This function will determine if a client mousewheel is scrolling up or down.
 */
  //window.addEventListener("load", eScroll);

  function eScroll() {

      window.addEventListener('mousewheel', (event)=> {

        let originalEvent = event.wheelDeltaY;

        if (event.wheelDeltaY >= 0) {
            console.log('Scroll up');
        }
        else {
            console.log('Scroll down');
        }
    });
  }

  window.addEventListener("load", scrollDown);

  function scrollDown() {

      window.addEventListener('mousewheel', (event)=> {

     if (event.wheelDeltaY <= 0) {
        console.log(event.wheelDeltaY);
        console.log('Mousewheel has scrolled down');
      }
   })
  }

  window.addEventListener("load", scrollUp);

  function scrollUp() {

      window.addEventListener('mousewheel', (event)=> {

      if (event.wheelDeltaY > 0) {
        console.log(event.wheelDeltaY);
        console.log('Mousewheel has scrolled up');
      }
  })

  }

Answer 11

Check if the user scrolled up and simply return

window.addEventListener(
  "scroll",
  e => {
    const scrolled = window.scrollY; // Number of pixels the user has scrolled
    let lastScrolled = 0; // Number of pixels the user has scrolled in the last event

    // If the user scrolls down, the scrolled value goes up and vice versa
    // So basically
    if (scrolled < lastScrolled) {
      // Then the user scrolled up!
      console.log("GET OUT! YOU SCROLLED UP!");
      // But you should update the lastScrolled value nonetheless
      lastScrolled = scrolled;
      return; // And then get out!
    }
    lastScrolled = scrolled; // The value gets updated in any case
    // And your code goes here
  },
  false
);

Answer 12

this code works for me, i hope this help you to

var scrollval = 0;
window.addEventListener('scroll', () => {
  if(scrollval > window.scrollY) {
    // Do something
    console.log('Scroll up')
  } else {
    // Do something
    console.log('Scroll down')
  }
  scrollval = window.scrollY;
});

Answer 13

Regarding this comment https://stackoverflow.com/a/63997400/9654048 This code should no repete more than once per direction Edit values and use it :)

const element = document.querySelector('nav');


element.style.lineHeight = '100px';
element.style.height = '100px';

// scroll tracking
let lastScrollY = window.scrollY;
let scrollingDown = false; // Tracking scroll down
let scrollingUp = false; //  Tracking scroll up


function handleMouseWheel(event) {
  const currentScrollY = window.scrollY;

  if (currentScrollY > lastScrollY && !scrollingDown && window.innerWidth > 991) {
    //Scroll down ( trigers only onece)
    scrollingDown = true;
    scrollingUp = false;

    element.style.lineHeight = '50px';
    element.style.height = '50px';
    //console.log("TEST down");
  } else if (currentScrollY < lastScrollY && !scrollingUp) {
    //Scroll up ( trigers only onece)
    scrollingUp = true;
    scrollingDown = false;

    element.style.lineHeight = '100px';
    element.style.height = '100px';
   //console.log("TEST up");
  }

  lastScrollY = currentScrollY;
}

// calling event
window.addEventListener('wheel', handleMouseWheel);