滾動事件監聽有3種實現方式：第一，直接使用window.onscroll賦值函數，但會覆蓋原有監聽器；第二，使用window.addeventlistener添加多個監聽器，靈活性更高；第三，結合節流或防抖優化性能，控制高頻觸發。此外，判斷滾動方向需記錄上次位置并與當前比較；優化方面包括減少dom操作、使用requestanimationframe及緩存計算結果；移動端需注意觸屏滾動、慣性滾動及視口變化影響。掌握這些方法可提升頁面響應效率與用戶體驗。
窗口滾動事件監聽，簡單來說，就是讓你的JavaScript代碼能夠“聽到”瀏覽器窗口正在滾動，然后做出相應的反應。這在網頁開發中非常常見，比如實現滾動加載、回到頂部按鈕、導航欄吸頂效果等等。
滾動事件監聽的3種實現方式
直接使用window.onscroll
這是最基礎也最直接的方法。你可以直接將一個函數賦值給window.onscroll屬性，這個函數會在每次窗口滾動時被調用。
window.onscroll = function() { // 在這里編寫你的滾動處理邏輯 console.log('窗口正在滾動...'); };
這種方式簡單粗暴，但也有一些缺點。比如，如果你需要監聽多個滾動事件，直接賦值的方式會覆蓋之前的監聽器。而且，這種方式的性能可能不是最優的，因為每次滾動都會觸發函數調用。
使用addEventListener
addEventListener是更推薦的監聽事件的方式。它可以讓你添加多個監聽器，而不會覆蓋之前的監聽器。
window.addEventListener('scroll', function() { // 在這里編寫你的滾動處理邏輯 console.log('窗口正在滾動（addEventListener）...'); });
addEventListener的優點是靈活性更高，可以添加多個監聽器，也可以方便地移除監聽器。
使用節流或防抖
滾動事件觸發頻率非常高，如果不加以控制，可能會導致性能問題。想象一下，你的滾動處理函數每次滾動都執行一次，如果這個函數內部有復雜的計算或者DOM操作，很容易造成頁面卡頓。
這個時候，就需要使用節流（throttle）或防抖（debounce）技術。
- 節流（throttle）： 保證在一定時間內，函數最多執行一次。比如，設置一個時間間隔為200ms，那么即使滾動事件觸發頻率很高，函數最多每200ms執行一次。
- 防抖（debounce）： 在事件被觸發后，延遲一段時間執行函數。如果在延遲時間內再次觸發事件，則重新計時。只有當事件停止觸發一段時間后，函數才會執行。
下面是一個使用lodash庫實現節流的例子：
import throttle from 'lodash/throttle'; window.addEventListener('scroll', throttle(function() { // 在這里編寫你的滾動處理邏輯 console.log('窗口正在滾動（節流）...'); }, 200));
lodash是一個非常流行的JavaScript工具庫，提供了很多實用的函數，包括節流和防抖。
如何判斷滾動方向？
有時候，你可能需要根據滾動方向來執行不同的操作。比如，向上滾動時顯示導航欄，向下滾動時隱藏導航欄。
要判斷滾動方向，你需要記錄上一次滾動的位置，然后與當前滾動位置進行比較。
let lastScrollTop = 0; window.addEventListener('scroll', function() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > lastScrollTop){ // 向下滾動 console.log('向下滾動'); } else { // 向上滾動 console.log('向上滾動'); } lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling }, false);
這段代碼中，lastScrollTop變量用來記錄上一次滾動的位置。在每次滾動時，我們獲取當前的滾動位置scrollTop，然后與lastScrollTop進行比較。如果scrollTop大于lastScrollTop，說明是向下滾動；否則，是向上滾動。
如何優化滾動事件監聽的性能？
除了使用節流和防抖之外，還有一些其他的技巧可以用來優化滾動事件監聽的性能。
- 減少DOM操作： 滾動處理函數內部應盡量避免頻繁的DOM操作。DOM操作是非常耗費性能的，特別是修改元素的樣式。如果需要修改樣式，可以考慮使用css類名來批量修改。
- 使用requestAnimationFrame： requestAnimationFrame是一個瀏覽器API，可以讓你的動畫更加流暢。它可以讓瀏覽器在下次重繪之前執行你的動畫代碼。使用requestAnimationFrame可以避免動畫卡頓，提高用戶體驗。
window.addEventListener('scroll', function() { requestAnimationFrame(function() { // 在這里編寫你的滾動處理邏輯 console.log('窗口正在滾動（requestAnimationFrame）...'); }); });
- 避免不必要的計算： 滾動處理函數內部應盡量避免不必要的計算。如果某些計算結果可以緩存，可以考慮使用緩存來提高性能。
如何在移動端監聽滾動事件？
在移動端監聽滾動事件與在PC端監聽滾動事件基本相同。但是，需要注意一些移動端的特殊性。
- 觸屏滾動： 移動端主要通過觸屏滾動，而不是鼠標滾輪。因此，滾動事件的觸發頻率可能會更高。建議使用節流或防抖來控制滾動事件的觸發頻率。
- 慣性滾動： 移動端通常有慣性滾動效果。這意味著，即使你停止滑動，頁面仍然會繼續滾動一段時間。在處理滾動事件時，需要考慮到慣性滾動的影響。
- 視口大小： 移動端的視口大小可能會發生變化，比如當用戶旋轉屏幕時。在處理滾動事件時，需要考慮到視口大小的變化。
總而言之，監聽窗口滾動事件是前端開發中的一項基本技能。掌握不同的實現方式，并了解如何優化性能，可以讓你寫出更加高效、流暢的網頁應用。
