如何使用Jquery檢測滾動速度？

我想嘗試和複製io7的safari功能，其中的url和導航欄最小化，當你慢慢滾動，在JavaScript/jQuery中。第一件事是檢測滾動速度，我已經看到this的問題，但我在內容腳本中這樣做，所以我不一定有他們使用的頂部和底部元素。還有另一種檢測滾動速度的方法嗎？如何使用Jquery檢測滾動速度？

來源

2014-02-09 EasilyBaffled

您可以通過jQuery附加到滾動事件，並使用時間戳和scrollOffset組合來確定滾動速度，方法是將偏移/時間與上次滾動事件進行比較。事情是這樣的：

var lastOffset = $(mySelector).scrollTop(); 
var lastDate = new Date().getTime(); 

$(mySelector).scroll(function(e) { 
    var delayInMs = e.timeStamp - lastDate; 
    var offset = e.target.scrollTop - lastOffset; 
    var speedInpxPerMs = offset/delayInMs; 
    console.log(speedInpxPerMs); 

    lastDate = e.timeStamp; 
    lastOffset = e.target.scrollTop; 
});

不管怎麼說，因爲你沒有在導航欄控制在一個普通的瀏覽器我沒有看到這裏的要點：/

可能是你正在尋找的是這樣的： Parallax scroll with sticky header

GL 克里斯

來源

2014-02-09 14:55:34 cschuff

我試圖模仿資產淨值的影響酒吧。我在Chrome擴展中使用內容腳本來創建疊加層，並且當用戶快速向下滾動時，我希望疊加層縮小並避開。 – EasilyBaffled

那麼上面的腳本將幫助你確定'快速'部分。根據滾動偏移量的不同，您可以減小疊加層的大小。定義一個點在哪裏隱藏它。你錯過了什麼？ – cschuff

嗯，我把窗口放在mySelector中，我得到了NaN for speedInpxPerMs。我訪問頁面的權限有限，因爲這是一個內容腳本，因此可能是問題的一部分。 – EasilyBaffled

我試圖用cschuff的答案，但出事了。帶着這樣的問題，並寫一個類的喜悅，我只是把代碼中的一個小類，在這裏獲得：https://github.com/SocialbitGmbH/JavascriptScrollSpeedMonitor

用法很簡單：

var scrollSpeedMonitor = new ScrollSpeedMonitor(function (speedInPxPerMs, timeStamp, newDirection) 
{ 
    console.log('Scroll speed: ' + speedInPxPerMs); 
});

來源

2015-02-07 16:51:36

此外，還有一個StarScroller用於檢測用戶何時以光速滾動，以添加一些不錯的「光速效果」:-) https://github.com/SocialbitGmbH/JavascriptStarScroller –

您錯過了關閉'''托架。 –

謝謝，添加了！ :-) –

如何使用Jquery檢測滾動速度？

回答

相關問題