检测触摸向上或向下滚动

Question

我需要用于触摸设备的相同代码。请帮助我

$(window).on('DOMMouseScroll mousewheel', function (e) {
    if (ScrollEnable) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            console.log('Down');
        } else {
            console.log('Up');
        }
    }
    return false;
});

这是我的触摸代码，但是领事刚刚开始我需要找到我的网站！我能做什么：|

$('body').on({
    'touchmove': function(e) {
        if (e.originalEvent.touches > 0 || e.originalEvent.touches > 0) {
            console.log('Down');
        } else {
            console.log('Up');
        }
    }
});

Answer 1

可以使用滚动事件

var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
   // downscroll code
} else {
  // upscroll code
}
lastScrollTop = st;
});

Answer 2

这份 w3schools.com 文档可以帮助您 http://www.w3schools.com/jquerymobile/jquerymobile_events_scroll.asp

$(document).on("scrollstop",function(){
  alert("Stopped scrolling!");
});

Answer 3

var updated=0,st;
$('body').on({
    'touchmove': function(e) { 
    st = $(this).scrollTop();
    if(st > updated) {
        console.log('down');
    }
    else {
        console.log('up');
    }
    updated = st;
    }
});

Answer 4

我知道我的解决方案更通用一些 - 它不依赖于任何元素，但它可能会帮助遇到与我相同问题的人。

var touchPos;

// store the touching position at the start of each touch
document.body.ontouchstart = function(e){
    touchPos = e.changedTouches[0].clientY;
}

// detect wether the "old" touchPos is 
// greater or smaller than the newTouchPos
document.body.ontouchmove = function(e){
    let newTouchPos = e.changedTouches[0].clientY;
    if(newTouchPos > touchPos) {
        console.log("finger moving down");
    }
    if(newTouchPos < touchPos) {
        console.log("finger moving up");
    }
}

Answer 5

我可以（并测试）在移动设备（android 和 ios、触摸设备）上检测滚动 down/up 的唯一方法：

（其他事件，例如 scroll、mousewheel、DOMMouseScroll、nmousewheel 和 wheel 不适用于移动设备)

jQuery:

let touchStartPosX = 0;
  // Detect Scroll Down and Up in mobile(android|ios)
  $(window).on('touchmove', (e) => {
    // Different devices give different values with different decimal percentages.
    const currentPageX = Math.round(e.originalEvent.touches[0].screenY);
    if (touchStartPosX === currentPageX) return;

    if (touchStartPosX - currentPageX > 0) {
      console.log("down");
    } else {
      console.log("up");
    }
    touchStartPosX = currentPageX;
  });

原版：

  let touchStartPosX = 0;
  window.addEventListener('touchmove', (e) => {
    // Different devices give different values with different decimal percentages.
    const currentPageX = Math.round(e.changedTouches[0].screenY);
    if (touchStartPosX === currentPageX) return;

    if (touchStartPosX - currentPageX > 0) {
      console.log("down");
    } else {
      console.log("up");
    }
    touchStartPosX = currentPageX;
  });

检测触摸向上或向下滚动

Detect touch scroll up or down

javascript

jquery

scroll

touch