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

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 像素的大小通常被视为有针对性的滑动。

Answer 2

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

Answer 3

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

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

Answer 4

let touchstartX = 0
let touchendX = 0
let touchstartY = 0
let touchendY = 0

const slider = document.getElementById('topMenuSlider')

function handleGesture() {
  if (touchendX < touchstartX) alert('swiped left!')
  if (touchendX > touchstartX) alert('swiped right!')
  if (touchendY < touchstartY) alert('swiped UP!')
  if (touchendX > touchstartX) alert('swiped DOWN!')
}

slider.addEventListener('touchstart', e => {
  touchstartX = e.changedTouches[0].screenX;
  touchstartY = e.changedTouches[0].screenY
})

slider.addEventListener('touchend', e => {
  touchendX = e.changedTouches[0].screenX;
  touchendY = e.changedTouches[0].screenY
  handleGesture()
})