Question

我想尝试复制io7的safari功能，在javascript / jquery中，当你慢慢滚动时，网址和导航栏最小化。首先要检测滚动速度，我已经看到了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 克里斯

Answer 2

我尝试使用cschuff的答案，但出了点问题。有了这个问题和编写课程的乐趣，我只是把代码放在一个小类中，在这里得到它：https://github.com/SocialbitGmbH/JavascriptScrollSpeedMonitor

用法很简单：

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

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

2 个答案: