了解如何與捲動互動、處理捲動事件以及節流
在網頁中，捲動以查看頁面下方的內容可能是最常見的事件，比點擊或鍵盤事件更常見。
您可以在window對象上監聽scroll事件，以獲取用戶每次捲動頁面時的信息：
window.addEventListener('scroll', event => {
// 偵測到 scroll 事件
})
在事件處理函數內，您可以通過檢查window對象的scrollY屬性來檢查當前的垂直捲動位置，通過scrollX屬性來檢查水平捲動位置。
window.addEventListener('scroll', event => {
console.log(window.scrollY)
console.log(window.scrollX)
})
請注意，scroll事件不是一次性的事件。
在捲動過程中，它會多次觸發，而不僅僅在捲動的結尾或開始時。因此，在事件處理函數中，如果需要進行任何操作，就有一個問題。
不應直接在事件處理函數中進行任何計算或操作，而應使用“節流”技術。
節流
scroll事件在事件期間內不僅僅觸發一次，而是在整個動作的時間範圍內持續調用其事件處理函數。
這是因為它提供了坐標，以便您可以追蹤發生的事情。
如果在事件處理函數中執行複雜操作，將影響性能，給您的站點用戶帶來困擾。
像Lodash這樣的庫提供了節流的功能，實現它需要100多行代碼，以應對所有可能的使用情景。下面是一個簡單易懂的實現，它使用setTimeout每100毫秒緩存一次捲動事件：
let cached = null
window.addEventListener('scroll', event => {
if (!cached) {
setTimeout(() => {
//you can access the original event at `cached`
cached = null
}, 100)
}
cached = event
})
節流也適用於我們在鼠標事件課程中所看到的
mousemove事件。同樣 - 在移動鼠標時該事件會多次觸發。
這裡有一個在Codepen上的例子：
看看這個CodePen的範例：Scrolling Events ，作者是Flavio Copes（@flaviocopes）。
如何獲取元素的捲動位置
在瀏覽器中構建用戶界面時，您可能會有一個可以捲動的元素，需要知道它的水平和垂直捲動位置。
您該如何做到這一點？
一旦您獲得了該元素，您可以檢查它的scrollLeft和scrollTop屬性。
0, 0位置始終位於左上角，因此任何捲動都是相對於該位置的。
示例：
const container = document.querySelector('. container')
container.scrollTop
container.scrollLeft
這些屬性是可讀寫的，所以您也可以設置捲動位置：
const container = document.querySelector('. container')
container.scrollTop = 1000
container.scrollLeft = 1000
