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

Question

我想尝试复制 io7 的 safari 功能，当您在 javascript/jquery 中缓慢滚动时，url 和导航栏会最小化。首先是检测滚动速度，我看过this已经有问题了，但我在内容脚本中这样做，所以我不一定有他们使用的顶部和底部元素。还有其他检测滚动速度的方法吗？

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;
});

无论如何，因为您无法控制常规浏览器中的导航栏，所以我看不到这里的意义:/

可能您正在搜索这样的内容:Parallax scroll with sticky header

GL 克里斯