javascript - 阻止鼠标滚轮事件在 OSX 中发生两次

Question

我注意到鼠标滚轮事件在 mac osx 中发生了多次。可以归因于惯性特征。

有没有办法解决这个问题？

(请自签名 SSL 不用担心!) https://sandbox.idev.ge/roomshotel/html5_v2/

我正在使用 scrollSections.js https://github.com/guins/jQuery.scrollSections

它使用鼠标滚轮 jquery 插件:https://github.com/brandonaaron/jquery-mousewheel

我看到很多人遇到同样的问题:https://github.com/brandonaaron/jquery-mousewheel/issues/36

有一些解决方案，但没有一个适用于 scrollSections 插件。

有什么想法可以从 JS 中禁用这种惯性特性吗？

我尝试的修复:

// Fix for OSX inertia problem, jumping sections issue.
if (isMac) {

  var fireEvent;
  var newDelta = deltaY;

  if (oldDelta != null) {

    //check to see if they differ directions
    if (oldDelta < 0 && newDelta > 0) {
      fireEvent = true;
    }

    //check to see if they differ directions
    if (oldDelta > 0 && newDelta < 0) {
      fireEvent = true;
    }

    //check to see if they are the same direction
    if (oldDelta > 0 && newDelta > 0) {

      //check to see if the new is higher
      if (oldDelta < newDelta) {
        fireEvent = true;
      } else {
        fireEvent = false;
      }
    }

    //check to see if they are the same direction
    if (oldDelta < 0 && newDelta < 0) {

      //check to see if the new is lower
      if (oldDelta > newDelta) {
        fireEvent = true;
      } else {
        fireEvent = false;
      }
    }

  } else {

    fireEvent = true;

  }

  oldDelta = newDelta;

} else {

  fireEvent = true;

}

您可以在此处看到修复:https://sandbox.idev.ge/roomshotel/html5_v2/但这是一个命中/未命中。

Answer 1

最新的超时解决方案有一个主要缺点:动态滚动效果可能会持续很长时间(甚至 1 秒左右)......禁用滚动 1-2 秒并不是最佳决定。

太棒了，正如所 promise 的，这是另一种方法。

我们的目标是为一个用户操作提供一个响应，在本例中为滚动。

什么是'one scrolling'？为了解决这个问题，假设'one scrolling'是一个从页面开始移动到运动结束的那一刻。

动态滚动效果是通过多次移动页面(例如，每 20 毫秒)一小段距离来实现的。这意味着我们的动态滚动由许多许多小的线性“滚动”组成。

经验测试表明，这种小“滚动”在动态滚动中间每 17-18 毫秒发生一次，在开始和结束时大约 80-90 毫秒发生一次。这是我们可以设置的一个简单测试来查看:

var oldD;
var f = function(){
    var d = new Date().getTime();
    if(typeof oldD !== 'undefined')
        console.log(d-oldD);
    oldD = d;
}
window.onscroll=f;

重要!每次发生这种迷你滚动时，都会触发滚动事件。 所以:

 window.onscroll = function(){console.log("i'm scrolling!")};

在一个动能卷轴中会发射 15 到 20 次以上。顺便说一句，onscroll 有很好的浏览器支持(参见 compatibility table )，所以我们可以依赖它(触摸设备除外，稍后我会介绍这个问题)；

有人可能会说重新定义window.onscroll 并不是设置事件监听器的最佳方式。是的，我们鼓励您使用

 $(window).on('scroll',function(){...});

或者你喜欢什么，这不是问题的重点(我个人使用我自己写的库)。

因此，在 onscroll 事件的帮助下，我们可以可靠地判断页面的这个特定的小移动是属于一个持久的动态滚动，还是一个新的滚动:

    var prevTime = new Date().getTime();
    var f = function(){
        var curTime = new Date().getTime();
        if(typeof prevTime !== 'undefined'){
            var timeDiff = curTime-prevTime;
            if(timeDiff>200)
                console.log('New kinetic scroll has started!');
        }
        prevTime = curTime;
    }
    window.onscroll=f;

您可以调用所需的回调函数(或事件处理程序)而不是“console.log”，这样就完成了!该函数只会在每次动态或简单滚动时触发一次，这是我们的目标。

您可能已经注意到，我使用 200 毫秒作为判断它是新滚动还是上一个滚动的一部分的标准。您可以将其设置为更大的值，以 999% 确保您阻止任何额外的调用。但是，请记住，这不是我们在我之前的回答中使用的不是。它只是任意两个页面移动之间的一段时间(无论是新卷轴还是动能卷轴的一小部分)。在我看来，动态滚动的步骤之间滞后超过 200 毫秒的可能性非常小(否则它根本不会流畅)。

正如我在上面提到的，onscroll 事件在触摸设备上的工作方式不同。它不会在动能卷轴的每一小步中触发。但它会在页面移动最终结束时触发。而且，还有ontouchmove事件……所以，没什么大不了的。如果需要，我也可以提供触摸设备的解决方案。

附言我知道我写得太多了，所以我很乐意回答您的所有问题，并在您需要时提供更多代码。

提供的解决方案在所有浏览器中都受支持，非常轻量级，更重要的是，它不仅适用于 mac，而且适用于所有可能实现动态滚动的设备，所以我认为这确实是一个可行的方法。