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

Question

两个 js 函数在滚动时加载。假设有两个滚动事件要处理

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>