How to handle two scroll events in a webpage

Question

two js function loads on scroll . Say there is two onscroll events to handle

window.onscroll = function(e) {
  var footerHeight = 500;
  if ((window.innerHeight + window.scrollY + footerHeight) >= document.body.offsetHeight) {
    if (branchLoaded == false) {
      loadBranch1();
    };
  }
};

window.onscroll = function(e) {
  var footerHeight = 500;
  if ((window.innerHeight + window.scrollY + footerHeight) >= document.body.offsetHeight) {
    if (branchLoaded == false) {
      loadBranch2();
    };
  }
};

Sagar V · Accepted Answer

In your code, the second event handler is overriding the first one.

This is similar to . In it, Only the latter one will execute.

Example

window.onscroll = function(){console.log(1)}
window.onscroll = function(){console.log(2)}

Solution

You need addEventListener to set up multiple Event Listener.

window.addEventListener('scroll',function(){console.log(1)});
window.addEventListener('scroll',function(){console.log(2)});

How to handle two scroll events in a webpage

Answers (1)

Example

Solution

Related Questions