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

Question

两个js函数在scroll上加载。假设有两个onscroll事件要处理

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

在您的代码中，第二个事件处理程序将覆盖第一个事件处理程序。

这类似于<element onload="function(){}" onload="function(){}">。其中只有后一个会执行。

示例

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>

解决方案

您需要addEventListener来设置多个事件监听器。

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>