ページリスニングは私たちがよく使う機能で、以下の 2 つのコードスニペットは、ページが 500px と 1000px スクロールされたときにそれぞれトリガーされる 2 つのイベントを示しています。コード内ではアロー関数が使用されています。
window.addEventListener('scroll', () => {
var scrollTop = document.documentElement.scrollTop
if (scrollTop > 500) {
console.log('500pxスクロールしました')
}
})
window.addEventListener('scroll', () => {
var scrollTop = document.documentElement.scrollTop
if (scrollTop > 1000) {
console.log('1000pxスクロールしました')
}
})
しかし、その後コードが IE10 に対応する必要があるため、この書き方は使えなくなりました。そこで、私はネイティブのfunction書き方を使用することにしました。
window.onscroll = function() {
// ...
}
使用している過程で、もしwindow.scrollが 1 つだけであれば問題はありませんが、複数のwindow.scrollがあると、後のものは機能しないことに気付きました。
では、この問題をどう解決すればよいのでしょうか？
window.scrollは一度しか存在できず、最初のものが機能し、後のものは機能しません。この問題は js で処理できます。
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('最初のwindow.scrollの呼び出し')
})
addEvent('scroll', function(){
console.log('最初のwindow.scrollの呼び出し')
})
実行すると、複数のscrollが同時に動作します。