JavaScript - 执行多个不同的window.onscroll

Question

我在这里遇到了一个小问题。我对Javascript有基本的了解，想要做以下事情：

现在，当你向下滚动时，菜单会变小。当你向上滚动时，它会恢复正常大小。我使用window.onscroll来调用这个事件：

var diff = 0;
function effects(){
var topDistance = (document.documentElement &&     document.documentElement.scrollTop) ||  document.body.scrollTop;
var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

if(topDistance > diff){ 
    diff = topDistance;
    if(clientWidth > 1024){
        if(topDistance > 300){
            document.getElementById("header").style.marginTop= "-100px";
        }
    }
}else if(topDistance < diff){
    diff = topDistance;
    if(clientWidth > 1024){
        if(topDistance > 300){
            document.getElementById("header").style.marginTop= "0";
        }
    }
}
}

window.onscroll = effects();

现在我想要另一个函数来影响我的CTA按钮，我们称之为“test”，但如果我想像上面那样做，那么特效函数将不再起作用：

function test(){
//do something
}
window.onscroll = test();

欢迎任何帮助！我觉得这不会是一个很大的挑战，但我猜我做错了。（注：请勿使用jQuery）

- Saypontigohe

---

所以你想在滚动时调用两个函数？但是，你是否还希望effects样式设计标题和test样式设计一些按钮，但两者都执行相同的滚动/偏移高度检查？ - nem035

顺便提一下，你可能也想看一下如何防抖你的onscroll函数：https://davidwalsh.name/javascript-debounce-function - Alan Jenkins

Answer 1

window.onscroll = blabla 是覆盖 onscroll 函数的方法。

你可以这样做：

window.onscroll = function() {
  effects();
  test();
}

window.addEventListener('scroll', effects);
window.addEventListener('scroll', test);

- Steeve Pitis

---

如此简单，却很难找到答案。谢谢！ - Saypontigohe

Answer 2

您可以为滚动事件使用多个监听器。

window.addEventListener('scroll', effects);
window.addEventListener('scroll', test);

那样你就不会覆盖window.onscroll。

- lukash

Answer 3

你应该使用

window.addEventListener

instead of window.onscroll

- sfwnisme

---

欢迎来到SO！请先看一下之前给出的其他答案。你的方法已经在那里提到了。为了保持网站的清晰和方便查找答案，我们尽量避免重复回答。 - ahuemmer