/

如何處理網頁上的捲動

如何處理網頁上的捲動

了解如何與捲動互動、處理捲動事件以及節流

在網頁中，捲動以查看頁面下方的內容可能是最常見的事件，比點擊或鍵盤事件更常見。

您可以在window對象上監聽scroll事件，以獲取用戶每次捲動頁面時的信息：

1
2
3
window.addEventListener('scroll', event => {
 // 偵測到 scroll 事件
})

在事件處理函數內，您可以通過檢查window對象的scrollY屬性來檢查當前的垂直捲動位置，通過scrollX屬性來檢查水平捲動位置。

1
2
3
4
window.addEventListener('scroll', event => {
 console.log(window.scrollY)
 console.log(window.scrollX)
})

請注意，scroll事件不是一次性的事件。

在捲動過程中，它會多次觸發，而不僅僅在捲動的結尾或開始時。因此，在事件處理函數中，如果需要進行任何操作，就有一個問題。

不應直接在事件處理函數中進行任何計算或操作，而應使用“節流”技術。

節流

scroll事件在事件期間內不僅僅觸發一次，而是在整個動作的時間範圍內持續調用其事件處理函數。

這是因為它提供了坐標，以便您可以追蹤發生的事情。

如果在事件處理函數中執行複雜操作，將影響性能，給您的站點用戶帶來困擾。

像Lodash這樣的庫提供了節流的功能，實現它需要100多行代碼，以應對所有可能的使用情景。下面是一個簡單易懂的實現，它使用setTimeout每100毫秒緩存一次捲動事件：

1
2
3
4
5
6
7
8
9
10
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位置始終位於左上角，因此任何捲動都是相對於該位置的。

示例：

1
2
3
const container = document.querySelector('. container')
container.scrollTop
container.scrollLeft

這些屬性是可讀寫的，所以您也可以設置捲動位置：

1
2
3
const container = document.querySelector('. container')
container.scrollTop = 1000
container.scrollLeft = 1000

scrollLeft和scrollTop