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

Question

当我使用鼠标滚轮在div中滚动内容时，我希望它滚动，例如，30px每一步或每个鼠标滚轮勾选w/e是最好的解决方案。

我更喜欢performance > ease，也就是我更喜欢javascript > jquery

Answer 1

所以我弄了一些我自己的解决方案，你可以看到示例

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

Answer 2

你自己实现鼠标滚轮细节有很大的问题，因为浏览器目前有三种不同的行为(AFAIK)。除了火狐之外的所有东西目前都支持mousewheel事件，每次“点击”都会传递一个120的wheelDelta参数。火狐有一个DOMMouseScroll事件，它会以相反的方向传递一个detail参数，每次点击3(我想)。苹果设备的分辨率要精确得多，而且会减速；因此，Webkit浏览器也会在两个轴上显示增量，而且触控板上的两指滚动屏幕上也没有“点击”的声音。最后，DOM Level 3 Events草案标准将把"click“定义为(我认为) 1，并提供三个轴的可能性；因此，您需要对您的代码进行未来验证。因此，实现自己的滚轮处理程序是一件痛苦的事情(我知道，因为我现在正在使用鼠标滚轮为我的SVG应用程序实现缩放)。

你可以参考Javascript: The Definitive Guide，第17.6章鼠标滚轮事件，了解更多细节。