如何使用Jquery检测滚动速度？

Question

我想尝试复制io7的safari功能,当你在javascript/jquery中慢慢滚动时,url和导航栏最小化.首先要检测滚动速度,我已经看过这个问题,但我在内容脚本中这样做,所以我不一定要使用它们使用的顶部和底部元素.还有另一种检测滚动速度的方法吗？

Answer 1

您可以通过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;
});

无论如何,因为你没有在常规浏览器中控制导航栏我在这里没有看到这一点:/

也许你正在寻找这样的东西:视差滚动与粘性标题

GL克里斯