如何在 vanilla javascript 中正確使用滾動事件監聽器？

Question

如何改進下面的代碼？

我希望只使用一個函數來執行帶有滾動事件的代碼。 我有這樣的事情：

function scrollMenu() {
 window.addEventListener("scroll", () => {
   // do stuff
 });
}
function scrollhabilities() {
 let cont = 0;
 window.addEventListener("scroll", () => {
   // do stuff
   };
 });
}

這有效，但我試圖改進代碼以減少重復，但它不起作用：

const scrollmenu = () =>{}
const scrollhabilities = () =>{}

function scrollThings() {
  window.addEventListener("scroll", () => {
    scrollmenu();
    scrollhabilities():   
  });
}

Answer 1

也許這可以幫助您找到一個起點。 （如果您在函數內部永遠不需要它，您顯然可以刪除事件參數）

 var scrollmenu = function(scrollEvent) { console.log('scrollmenu', window.scrollY) }; var scrollhabilities = function(scrollEvent){ console.log('scrollhabilities', window.scrollY) }; var scrollThings = function () { window.addEventListener("scroll", event => { scrollmenu(event); scrollhabilities(event); }); }();

 div.scroll { background-color: orange; height: 1000px; width: 400px; }

 <div class="scroll">move your cursor here and scroll up and down</div>

Answer 2

您可能需要去抖動功能。 去抖動允許您的函數在指定的時間段內僅觸發一次（以下示例中為 500 毫秒）。

如果沒有此功能，在連續滾動期間滾動窗口將觸發數千次。 使用此功能，它只會觸發一次。 只要用戶暫停指定的時間段（例如 500 毫秒），該功能就會觸發。 （我將超時設置為 500 毫秒以確保看到效果——通常你不會指定這么大的數字——也許 100 毫秒或更短可能更好。）

請注意，有一個名為“throttle”的伴隨函數略有不同。

 var cnt = 0; const msg = document.getElementById('msg'); window.addEventListener("scroll", () => { handleScroll(); }); const handleScroll = debounce(() => { cnt++; msg.innerText = cnt; },500); function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; };

 body{height:3000px;} #msg{ position:fixed; top:20px; right:2px; padding:2vh 5vw; font-size:5rem; background:wheat; border:1px solid orange; }

 <div id="msg"></div>

參考：

https://davidwalsh.name/javascript-debounce-function

這條評論解釋了油門

https://css-tricks.com/debouncing-throttling-explained-examples/