Scroll Function Firing Multiple Times Instead of Once

Question

I am trying to create a website that automatically scrolls to each section upon a single scroll action. This means that the code has to check if the page is scrolled up or scrolled down. I believe the code below solves my problem but the scroll action is fired more than once while the page is scrolling. You will see that the first alert in the if statement reaches 5 instead of the desired 1. Any help on the matter would be highly appreciated.

[Note] I am using the velocity.js library to scroll to each section within the container.

var page = $("#content-container");
var home = $("#home-layer-bottom");
var musicians = $("#musicians");
var athletes = $("#athletes");
var politics = $("#politics");
var bio = $("#politics");
var pages = [ home,musicians,athletes,politics,bio ];

var pageCur = 0;


var lastScrollTop = 0;
page.scroll(function(){

var st = $(this).scrollTop();
var pageNex = pageCur + 1;

if (st > lastScrollTop){
    alert(pageNex);
pages[pageNex].velocity("scroll", { container: $("#content-container") });
} else {
   alert(pageCur-1);
pages[pageCur-1].velocity("scroll", { container: $("#content-container") });
}
lastScrollTop = st;
pageCur = pageNex;
});

score 15 · Accepted Answer · answered Jan 16 '16 at 00:34

15

The scroll event (as well as the resize event) fire multiple times as a user does this. To help this, the best practice is to debounce. However, I've never gotten that to work. Instead, I use a global boolean to check if the function has fired.

var scrolled = false;
page.on('scroll', function(){
    if(!scrolled){
        scrolled = true;
        //do stuff that should take a while...
        scrolled = false;
    };
});

answered Jan 16 '16 at 00:34

Donnie D'Amato

3,832
1
15
40

5

worked perfectly. Just added a setTimeout which runs after 500 milliseconds of the scroll, to make scrolled = false. – Deepak Pathak Aug 21 '17 at 20:06
Also had to add a `setTimeout` since the scroll event queue the requests, so without `setTimeout` the scroll event will still fire multiple times, just in a synchronous way – deanwilliammills Mar 02 '20 at 21:23
I did the same with a timeout, very simple and clean – Dory Daniel Sep 04 '20 at 11:28

score 14 · Answer 2 · edited May 16 '23 at 08:14

14

This worked for me!

var ScrollDebounce = true;

$('.class').on('scroll', function () {
    if (ScrollDebounce) {
        ScrollDebounce = false;

        //do stuff    

        setTimeout(function () { ScrollDebounce = true; }, 500);
    }
})

edited May 16 '23 at 08:14

NXT

1,981
1
24
30

answered May 31 '18 at 16:22

JaredCS

427
4
11

2

This actually worked! Thanks. Your name seems familiar, btw. Looks like from usj-r philippines – enrique Nov 11 '20 at 05:43

Scroll Function Firing Multiple Times Instead of Once

2 Answers2

Linked