4

当我使用鼠标滚轮滚动内容时，div我希望它滚动，例如，30px每一步或每个鼠标滚轮刻度都是最好的解决方案。
我更喜欢，performance > ease即我更喜欢javascript > jquery

4

2 回答 2

7

所以我摆弄了一些我自己的解决方案，你可以在这里
看到例子 谢谢汤姆引导我回答这个问题。

JS：

function wheel($div,deltaY){
   var step = 30;
   var pos = $div.scrollTop();
   var nextPos = pos + (step*(-deltaY))
   console.log("DelatY: " + deltaY + ", Step: " + step + ", nextPos: " + nextPos);
   $div.scrollTop(nextPos);
}

$('#test').bind('mousewheel', function(event, delta, deltaX, deltaY) {
    wheel($(this),deltaY);
    event.preventDefault();
});

使用的库：

  • jQuery 1.8.3
  • jQuery 鼠标滚轮
于 2013-09-02T02:20:42.760 回答
6

自己实现鼠标滚轮细节存在很大问题，因为（AFAIK）浏览器当前正在执行三种不同的行为。目前除了 Firefox 之外的所有东西都支持mousewheel事件，它wheelDelta每次“点击”传递一个 120 的参数。Firefox 有DOMMouseScroll事件，它将通过detail每次“点击”的参数为 3（我认为），方向相反。Apple 设备具有更精细的分辨率，并且会减速；所以 Webkit 浏览器在两个轴上也给出了增量，并且在触控板两指滚动上没有“点击”。最后，DOM Level 3 Events 草案标准将定义“点击”为（我认为）1，并提供三个轴的可能性；所以你需要让你的代码适应未来。所以实现你自己的滚轮处理程序有点痛苦（我知道，因为我现在正在使用鼠标滚轮为我的 SVG 应用程序实现缩放）。

您可以查阅 Javascript：权威指南，第 17.6 章鼠标滚轮事件，了解更多详细信息。

于 2013-09-02T01:36:52.030 回答