How to detect a "scroll down" event

Question

Does anyone know how to detect a scroll-down event in javascript/jquery?

Many thanks.

CodeGodie · Answer 1 · 2014-10-28T18:31:43.163

You need to set unique Ids on the elements. When the element is at a certain point of the screen, run the scroll function and set it to stop at the next element's ID. Try this to detect scroll:

JS:

 $(window).scroll(function() { //when window is scrolled
        var target1_top = $('#target1').offset().top;
        var window_top = $(window).scrollTop();
        var diff = target1_top - window_top;
        console.log(diff)
        if (diff < 0) {// this you need to specify; the # of pixels you need for the auto scroll to occur
            //
            $('html, body').animate({
                scrollTop: $("#target2").offset().top //scroll to this element when condition matches
            }, 2000);
        }
    });

HTML:

<body>
    <div id="target1">
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>

    </div>
    <div id="target2">
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>

    </div>
    <div id="target3">
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>

    </div>
</body>

`alert()` on `scroll` will be VERY annoying :P – Jason Sperske Oct 28 '14 at 18:11 — Jason Sperske, Oct 28 '14 at 18:11
No idea who is downvoting, I uped you – njfife Oct 29 '14 at 16:50 — njfife, Oct 29 '14 at 16:50

score 1 · Answer 2 · edited May 23 '17 at 12:01

1

Based on this: How can I determine the direction of a jQuery scroll event?

var lastScrollTop = 0;
var currDiv = $('#firstDiv');
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       currDiv = scrollToPrevDiv();
   } else {
      currDiv = scrollToNextDiv();
   }
   lastScrollTop = st;
});

This will save your currentDiv and allow the user to scroll up and down

function scrollToNextDiv() {
   $("html").scrollTop(currDiv.next().scrollTop());
}
function scrollToPrevDiv() {
   $("html").scrollTop(currDiv.prev().scrollTop());
}

You will want to update the current div if the user does something else like grab the scrollbar to move the page. If that happens you can do something like this:

function getDivLocations() {
   var scrollLocations = [];
   $('.myContentDivClass').each(function(i, div) {
      scrollLocations.push($(div).scrollTop());
   });
   return scrollLocations;
}

Then with those div locations you can figure out which one is closest to the top and update it accordingly.

Clearly the selectors I used might change based on however you set up your html.

Good luck!

edited May 23 '17 at 12:01

Community

1
1

answered Oct 28 '14 at 18:20

njfife

3,555
1
20
31

Why the down vote? I am happy to improve this, but the question was not very specific – njfife Oct 28 '14 at 18:31
I am stuck with an infinite loop function. I scroll to the next element, and so it triggers the scroll function which scrolls back to the previous element, etc... How can I fix this? The code looks like this : if (currDiv == 1) { scrollSecond(); currDiv = 2; } else if (currDiv == 2) { scrollFirst(); currDiv = 1; } – Malcom Oct 28 '14 at 20:37
Yeah I didn't think of that, you could have a flag maybe, or turn off the listener then turn it back on after a little bit of time – njfife Oct 29 '14 at 16:49
how do you do that please? – Malcom Oct 29 '14 at 18:04

score 1 · Answer 3 · answered Oct 28 '14 at 18:45

You can't do it with just HTML, you'll need to use JQuery or JavaScript. JQuery solution can look like this:

// This code is just to detect scroll event.
$(document).ready(function() {
    $(window).scroll(function() {
       // do whatever you need here.
    });
});

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>
// This code is just to detect scroll event.
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.

How to detect a "scroll down" event

3 Answers3