Question

 scroller1   scroller2
----------- -----------
|this is o| |this is a|
|ne elemen| |nother el|
|t, four l| |3 lines  |
|ines     | |         |
----------- -----------

That is a simple example set up.
I have set up a system which will scroll to the nth element in each scroller, but also using fractions so that if scroller1 is at element 4 and halfway to five it will do the same for scroller2.

But when I call the function ‘onscroll’ it sets the other scroller to the correct positions, but then calls ‘onscroll’ because changing its scrollTop is scrolling. This in turn repeats itself until Javascript throws the Max Stack Call error, or both scrollers reach the bottom.

How can this be prevented?

Answer 1

Create a global variable, currentlyHandlingScrollEvent, and conditionalize your onscroll code based on it:

var currentlyHandlingScrollEvent = false;
function handleScroll (e) {
  if (!currentlyHandlingScrollEvent) {
    currentlyHandlingScrollEvent = true;
    // do stuff ...
    currentlyHandlingScrollEvent = false;
  }
}

scroller1.onscroll = handleScroll;
scroller2.onscroll = handleScroll;