如何指定每一步滚动移动多少像素？答案

【问题标题】：How to specify how many pixels scroll moves on each step?如何指定每一步滚动移动多少像素？
【发布时间】：2013-09-05 01:14:29
【问题描述】：

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

【问题讨论】：

我建议让用户的操作系统来处理。仅仅因为您认为应该以不同的方式来改变用户鼠标的工作方式，这通常不是一种好的用户体验。
当您想出自己的解决方案时，最好将其写为答案而不是对问题的编辑。

标签： javascript jquery html scroll

【解决方案1】：

所以我自己摆弄了一些解决方案，你可以看例子here
感谢Tom 引导我回答这个问题。

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 鼠标滚轮

【讨论】：

【解决方案2】：

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

您可以查阅 Javascript: The Definitive Guide，第 17.6 章鼠标滚轮事件，了解更多详细信息。

【讨论】：