jQuery Mousewheel 不支持触控板？答案

【问题标题】：jQuery Mousewheel doesn't support trackpad?jQuery Mousewheel 不支持触控板？
【发布时间】：2014-08-15 19:39:23
【问题描述】：

我正在使用流行的mousewheel 插件来模拟像this website 这样的整页滚动。

jQuery(function() {
    var top = 0,
        viewport = jQuery(window).height(),
        step = jQuery(".home .l-section:first").outerHeight(),
        body = jQuery.browser.webkit ? jQuery('body') : jQuery('html'),
        wheel = false;
    jQuery('body').mousewheel(function(event, delta) {
        wheel = true;
        if (delta < 0) {
            top = (top + viewport) >= jQuery(document).height() ? top : top += step;
            body.stop().animate({
                scrollTop: top
            }, 400, function() {
                wheel = false;
            });
        } else {
            top = top <= 0 ? 0 : top -= step;
            body.stop().animate({
                scrollTop: top
            }, 400, function() {
                wheel = false;
            });
        }
        return false;
    });
    jQuery(window).on('resize', function(e) {
        viewport = jQuery(window).height();
        step = jQuery(".home .l-section:first").outerHeight();
    });
    jQuery(window).on('scroll', function(e) {
        if (!wheel) top = jQuery(this).scrollTop();
    });
});

效果很好，但在使用触控板时却不行。使用触控板，无论我尝试滚动多慢，它都会滚动到页面底部。

【问题讨论】：

标签： jquery scroll mousewheel trackpad

【解决方案1】：

适用于我的笔记本电脑的触控板。但是，这是已知问题，您是否尝试过使用 debounce？

function mouseHandle(event) {
    newDate = new Date();
    var scrollAllowed = true;

    if( wheel < 10 && (newDate.getTime()-oldDate.getTime()) < 100 ) {
        scrollPos -= event.deltaY*(10-wheel);
        wheel++;
    }
    else {
        if( (newDate.getTime()-oldDate.getTime()) > 100 ) {
            wheel = 0;
            scrollPos -= event.deltaY*60;
        }
        else {
            scrollAllowed = false;
        }
    }

    oldDate = new Date();

    if( scrollAllowed ) {
        // do your stuff here
    }
}

//Apply this effect with jQuery On event
$('body').on('mousewheel', function(event) { mouseHandle(event); });

这里已经报告了这个问题：https://github.com/brandonaaron/jquery-mousewheel/issues/36

您将在那里获得多种解决方案。希望有帮助。帮助自己:-)

和平，

拉胡尔

【讨论】：

所以我应该在if scrollAllowed 中拥有我的功能（发布在原帖中）？
几乎可以工作，但仍然太快，但是如果我只是触摸它，它确实会从一个部分到另一个部分，所以它似乎至少可以工作。
太棒了。我们可以稍微调整一下值以获得正确的效果
我只是想帮助您入门 :-)
哦，它已经破坏了常规的鼠标滚动。

【解决方案2】：

我用 date() 解决了我的问题跟踪，所以如果我设置的某个时间不是过去，用户将无法再滚动。

这是我的 sn-p 使用 'wheel' 功能

  var last_time = new Date(); 
  $(window).bind('wheel', function(event) {
      var now = new Date();
      if((now - last_time) >= 1200)//Miliseconds
      {
        if (event.originalEvent.deltaY <= 0) {

            //Go up
          }
          else {
            //Go down
          }

          last_time = new Date(); 
        }
  });

【讨论】：

【解决方案3】：

对于发现此问题的任何其他人，“鼠标滚轮”事件已被弃用。 https://developer.mozilla.org/en-US/docs/Web/Events/wheel

改为使用“wheel”事件您可以使用 wheel 事件上的“originalEvent”属性来获取您期望的属性。（deltaX、deltaY 等...）

【讨论】：

这仅适用于 Firefox。
好吧，firefox 是用户的很大一部分，这意味着你必须为它编写代码:)

【解决方案4】：

我使用 underscore 的 debounce 功能来解决这个问题。这是我使用的代码。

 $('...').mousewheel(_.debounce(function(event) {
   event.preventDefault();

   if(event.originalEvent.deltaY < 0){
      /* do your stuff when scrolling up */

   }else {
      /* do your stuff when scrolling down */

}, 40,true));

【讨论】：