如何在網頁上滾動

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

你可以聽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） 在密碼筆。