如何处理网页中的两个滚动事件

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();
    };
  }
};

Answer 1

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

This is similar to <element onload="function(){}" onload="function(){}"> . In it, Only the latter one will execute.

Example

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

 <div>Test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Bottom</div>

Solution

You need addEventListener to set up multiple Event Listener.

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

 <div>Test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Bottom</div>