从浏览器中的当前位置滚动距离后检测滚动

Question

我想检测我是否正在滚动，但仅在我从当前位置滚动一定距离后才检测。当我停止滚动时，此距离重置为当前位置

我知道如何使用 检测滚动经过页面上的某个点.scrollTop()，但我希望这个特定点成为我当前的位置，但只有在我停止滚动之后。

为什么我需要这个：我有一个导航栏，它可以根据我是否向上或向下滚动来更改所有CSS。因此，如果我的滚动手指向不同方向颤抖（例如从上到下滚动），导航栏将像闪光灯一样变换。所以我的计划是仅检测高于或低于 10px 的滚动，因此用户需要制作专用滚动来激活导航栏 css 更改。

伪代码：

if (scrolled 10px above or below current_location in browser) {
  console.log('it worked');
} else {
  console.log('You have not scrolled far enough!')
}

if (scrolling stops) {
  reset position of current_location. 
}

Answer 1

这将是最简单的方法：

$(document).ready(function() {

var previous = 0;

$(window).scroll(function() {

    var current = $(this).scrollTop();

    if (current > previous) // down
    else // up

    previous = current;
});
});

http://codepen.io/anon/pen/ojxPOg?editors=001

使用鼠标滚轮插件，您甚至在实际开始滚动之前就知道方向是什么。可能很好，但对于移动设备，仍然需要上述内容（为了最快的方式）。

http://codepen.io/anon/pen/YPmjym?editors=001

编辑 - 第一个代码可能无法在触摸设备上按预期工作。平移屏幕实际上不会触发滚动，直到您释放它为止（据我所经历）。解决这个问题需要另一个脚本来监听touchmove事件。以下是如何执行此操作的一个示例：

$(window).on('touchstart', function(e) {

    var swipe = e.originalEvent.touches,
    start = swipe[0].pageY;

    $(this).on('touchmove', function(e) {

        var contact = e.originalEvent.touches,
        end = contact[0].pageY,
        distance = end-start;

        if (distance < -30) // up
        if (distance > 30) // down
    })
    .one('touchend', function() {

        $(this).off('touchmove touchend');
    });
});

大约 30 个像素的量通常被视为有针对性的滑动。