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

Posted 2021-05-04

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

我知道如何使用.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. 
}

答案

这将是最简单的方法：

$(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

使用mousewheel插件，甚至在你真正开始滚动方向之前就已经知道了。可能很好，但对于移动，仍然需要上述（最快的方式）。

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个像素的量视为目标滑动。

另一答案

with this i was able to get the swipe up and down...

我添加一个标志，所以它只运行一次解决了持续滑动的问题。感谢https://css-tricks.com/forums/topic/detect-vertical-direction-of-jquery-touchmove/

currentY:
var swipe = false,
var lastY,
timer;
$(document).bind('touchstart', function(e) {

lastY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY;
console.log(lastY);
});
$(document).bind('touchmove mousemove', function(e) {

var currentY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY;

if(!swipe){
if (Math.abs(currentY-lastY) < 50) { return; }
 swipe = true;
if (currentY > lastY) {
console.log('down');
} else {
console.log('up');
}
}
}).on('touchend', function(){
  swipe = false;
});

另一答案

我不明白为什么你需要这个，但下面是你的伪代码的代码：

var currentScrolled = 0;
$(document).scroll(function () {

currentScrolled = $(this).scrollTop();

if (currentScrolled > 10) {
    console.log('it worked');
} else {
    console.log('You have not scrolled far enough!')
}});

$(document).scrollstop(function(){
   currentScrolled = 0; 
});