多个window.onscroll同时存在的解决方案
发布时间:2019-07-19 14:53 星期五
问题:
同一个页面,我们可能会使用到多个window.onscroll事件,分别在不同的代码块来监听滚动条,但直接使用window.onscroll事件会导致只有一个window.onscroll事件能正常运行,而我们是需要他们同时运行,互不影响
第一个方法
先判断之前有没有加载过监听事件
缺点:只能监听两个滚动条事件
// 第一次监听滚动条事件
window.οnscrοll = function() {
console.log('首次监听滚动条事件')
}
// 获取滚动事件的对象
var method = window.onscroll
// 如果滚动事件已存在过
if (typeof method == 'function') {
window.onscroll = function() {
method.call(this)
console.log('第二次监听滚动条事件 ')
}
}
第二个方法
function addEvent(type, toDo) {
if (window.attachEvent) {
window.attachEvent('on' + type, function() {
toDo.call(window)
})
} else {
window.addEventListener(type, toDo, false)
}
}
addEvent('scroll', function(){
console.log('第一次调用')
});
addEvent('scroll', function(){
console.log('第二次调用')
});
第三个方法
页面需要加载Jquery
$(document).ready(function(){
$(window).scroll(function(){
console.log('第一次调用')
})
$(window).scroll(function(){
console.log('第二次调用')
})
})
今天就碰到了这个问题,这种写法感觉有局限性。
如果在两个js文件中需要用到window.scroll,就没办法这样调用了。
必须要合并在一个,感觉有些臃肿,不过也没有更好的写法了
感谢博主的分享
刚尝试第二种方法,先后在两个页面调用`addEvent(‘scroll’, function()…`,可以正常运行。