如何在網頁上滾動

探索如何與滾動交互,對滾動事件做出反應並限制它們

滾動頁面以查看摺頁下面的內容可能是頁面上最常見的事件,而不是單擊或鍵盤事件。

你可以聽scroll上的事件window對象,以在用戶每次滾動頁面時獲取信息:

window.addEventListener('scroll', event => {
  // scroll event detected
})

在事件處理程序內部,您可以通過檢查window財產window.scrollY,並使用window.scrollX

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

請記住scroll事件不是一次性的事情。

它在滾動過程中會觸發很多次,而不僅僅是在滾動結束或開始時,因此,如果您需要進行任何類型的操作,就會出現問題。

您不應該直接在處理程序事件處理程序中進行任何計算或操作,但我們應該使用節流反而。

節流

scroll每個事件不會一次觸發event,而是在整個操作過程中持續調用事件處理函數。

這是因為它提供了坐標,因此您可以跟踪正在發生的事情。

如果在事件處理程序中執行複雜的操作,則會影響性能並給站點用戶帶來緩慢的體驗。

提供節流功能的庫洛達什用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上的一個示例:

看筆滾動事件由Flavio Copes(@flaviocopes) 在密碼筆

Tech Wiki Online!