window.scroll メソッドは一度しか存在できません。どのように解決すればよいですか？

ページの監視は、私たちがよく使う機能の 1 つです。以下の 2 つのコードブロックは、ページが 500px および 1000px スクロールしたときにそれぞれトリガーされます。コード内では、アロー関数が使用されています。

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は 1 回しか存在できないため、最初のものは機能しますが、後続のものは機能しません。この問題を解決するために、JavaScript で処理することができます。

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が同時に実行されます。