多个window.onscroll同时存在的解决方案
问题:
同一个页面,我们可能会使用到多个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('第二次调用')
})
})