如何使用jQuery/JavaScript檢測觸摸板滾動

Question

我正在構建網頁。它看起來像單個頁面，但我正在處理sections.On點擊按鈕控件我隱藏所有部分，並顯示在屏幕上的特定部分。 所以，我可以做同樣的控制與鼠標墊上下滾動嗎？我已經在谷歌檢查，我無法得到適當的解決方案。 如果這個問題已經發布，請給我提供參考鏈接。

Answer 1

可以使用scroll event來響應用戶的滾動，像這樣：

$("#target").scroll(function(event) { 
    console.log("scroll event received:", event); 
}); 

注意，滾動事件非常頻繁觸發，所以，如果你做任何事情，使瀏覽器的工作辛苦，你應該小心扼殺事件，即確保您每x毫秒左右執行一次代碼。

如果您只想在滾動停止後執行代碼，請使用I have this fiddle for you。

function checkf(predf, callback, ms) { 
    window.setTimeout(function() { 
     if (predf()) { 
      callback(); 
      return; 
     } 
     checkf(predf, callback, ms); 
    }, ms); 
} 

function afterScrollStops(func) { 
    var ms = 100, // interval to perform the scroll position check 
     oldX = $(document).scrollLeft(), 
     oldY = $(document).scrollTop(); 

    function startf() { 
     $(document).one("scroll", function() { 
      checkf(function() { 
       var newX = $(document).scrollLeft(), 
        newY = $(document).scrollTop(), 
        stoppedScrolling = newX === oldX && newY === oldY; 

       oldX = newX; 
       oldY = newY; 

       return stoppedScrolling; 
      }, function() { 
       func(); 
       startf(); 
      }, ms); 
     }); 
    } 

    startf(); 
} 

afterScrollStops(function() { 
    console.log("user stopped scrolling"); 
}); 

在本例中，傳遞給afterScrollStops用戶已經停止滾動之後執行功能的回調函數。