在浏览器中从当前位置滚动距离后检测滚动 [英] Detect scrolling after scrolling distance from current position in browser

问题描述

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

我知道如何使用 .scrollTop检测页面上某个点的滚动情况），但我希望这个特定点是我的当前位置，但只有在我停止滚动后。

为什么我需要这个：I有一个导航栏，根据我是否向上或向下滚动来改变它的所有CSS。因此，如果我的滚动手指以不同的方向发抖（例如从上到下滚动），则导航栏将像频闪灯那样转换。所以我的计划是只检测10px以上的滚动条，所以用户需要制作一个专门的滚动条来激活navbar css的变化。

伪代码：

  if（在浏览器中滚动10px以上或以下的current_location）{
 console.log（'it worked'）; 
} else {
 console.log（'你没有滚动得太远！'）
} 
 
 if（滚动停止）{
 reset position current_location。 
} 
  

解决方案

这将是最简单的方法：

  $（document）.ready（function（）{
 
 var previous = 0; 
 $ b $（window）.scroll（function（）{
 
 var current = $（this）.scrollTop（）; 
 
 if（current> ; previous）// down 
 else // up 
 
 previous = current; 
}）; 
}）; 
  

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

使用鼠标滚轮插件，您即使在你真正开始滚动方向之前，你也知道。可能会很好，但对于手机来说，上述内容仍然需要（以最快的方式）。

/ YPmjym？editors = 001rel =nofollow> http://codepen.io/anon/pen/YPmjym?editors=001

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

  $（window）.on（'touchstart'，function（e）{
 
 var swipe = e.originalEvent.touches，
 start = swipe [0] .pageY; 
 $ b $（this）.on（'touchmove'，function（ e）{
 
 var contact = e.originalEvent.touches，
 end = contact [0] .pageY，
 distance = end-start; 
 $ b $如果（距离> 30）//向下
}）
 .one（'touchend'，function（）{$ b $（距离< -30）//向上
 b 
 $（this）.off（'touchmove touchend'）; 
}）; 
}）; 
  

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

I want to detect if i am scrolling but only after I've scrolled a certain distance from my current location. When I stop scrolling, this distance resets to the current location

I know how to detect scrolling past a certain point on the page with .scrollTop(), but I want this certain point to be my current location but only after I've stopped scrolling.

Why I need this: I have a navbar that changes all of it's css depending on if I've scrolled up or down. So if my scroll finger shivers in a different direction (from up to down scroll for example), the navbar will transform like a strobe light. So my plan was to only detect scrolls abover or below 10px so the user will need to make a dedicated scroll to activate the navbar css change.

pseudo code:

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. 
}

解决方案

This would be the simplest approach :

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

Using the mousewheel plugin, you'd know even before you've actually started scrolling what the direction is. Might be nice but for mobile the above would still be needed (for the quickest way).

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

Edit - the first code might not work as expected on touch devices. Panning the screen doesn't actually fire a scroll until you release it (as far as I've experienced). Addressing that would need another script that will listen for touchmove events. Here's one example of how to do that :

$(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');
    });
});

An amount of about 30 pixels is usually treated as a targeted swipe.

这篇关于在浏览器中从当前位置滚动距离后检测滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！