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

当我使用鼠标滚轮在

div

中滚动内容时，我希望它滚动，例如，

30px

每个步骤或每个鼠标滚轮勾选w/e是最佳解决方案。

---

我更喜欢

performance>ease

，也就是说，我更喜欢

javascript>jquery

自己实现鼠标滚轮细节有很大的问题，因为浏览器目前有三种不同的行为。除了Firefox之外，其他所有东西目前都支持

mousewheel

事件，该事件每次“点击”都会传递一个

wheelDelta

参数120。Firefox有一个

DOMMouseScroll

事件，它会在每次“点击”时传递一个

detail

参数3（我认为），并且方向相反。苹果设备的分辨率要精细得多，而且速度要慢得多；因此，Webkit浏览器在两个轴上也提供了增量，并且在触控板的两指滚动上没有“点击”。最后，DOMLevent3EventsDraft标准将定义一个“点击”为（我认为）1，并提供三个轴的可能性；因此，您需要对代码进行未来验证。因此，实现自己的滚轮处理程序是一种痛苦（我知道，因为我现在正在使用鼠标滚轮为我的SVG应用程序实现缩放）

---

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

因此，我提出了一些自己的解决方案，您可以查看示例
谢谢你引导我找到这个答案

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();
});

已用库：

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

---

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