如何指定每一步滚动移动的像素数？

Question

当我使用鼠标滚轮滚动内容div,我希望它通过例如滚动,30px每个步骤或每个鼠标滚轮蜱瓦特/ e是最好的解决办法.
我更喜欢,performance > ease我更喜欢javascript > jquery

Answer 1

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

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

Answer 2

所以我摆弄了自己的一些解决方案,你可以看到这里的例子
谢谢汤姆带领我这个答案.

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