Question

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

Answer 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 mousewheel

Answer 2

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

您可以参考Javascript：The Definitive Guide，第17.6章Mousewheel Events，了解更多详情。

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

2 个答案: