在jQuery.scroll（）上更改DOM元素的位置会创建Choppy Scrolling

Question

我创建了一个使用一些热门jQuery视差滚动的网站，它曾经非常流畅，但最近（浏览器的更新？）它已经变得不稳定了。我认为这与jQuery滚动事件的触发频率有关。这是我想要做的一个小例子大小的版本......

$(window).scroll(function() {
    offset = window.pageYOffset;
    $('#firstImg').css({
         "top" : -750 + (offset/1.5) + "px"
    });
});

基本上，当我向下滚动时，它会逐渐垂直地对图像进行视差。您可以在此处查看产品：http://www.davegamache.com/sandbox/best-of-2010/。 Campaign Monitor还为我们的招聘网站重新调整了我的代码...请在此处查看：http://www.campaignmonitor.com/hiring/。

我需要弄清楚如何防止令人难以置信的不稳定滚动。我甚至创建了一个setInterval并手动触发了重新定位代码（而不是使用.scroll（）事件）并且无法使其平滑（50米/秒是波动的，因为它没有足够的射击，10米/秒只是因为看似频繁而跳起来？）。

让我知道是否有人可以提供帮助。非常感谢！

Answer 1

我查看了您的网站＆amp; campaignmonitor.com。你的工作似乎很好，而另一个显示你描述的不稳定的滚动。

在查看代码之间的差异后，我注意到Campaign Monitor在其项目上使用了样式定义的精确像素（例如Seven Years Young上的条形图）而不是基于百分比％的位置（例如草图元素） ）。

我使用firebug对一些元素进行了测试，似乎解决了问题。

希望有所帮助。

Answer 2

Scroll Event 实际上会为每个滚动操作触发很多次（在Firefox等浏览器中），因此处理滚动的更好方法是 {{ 3}}

注意：仅当使用鼠标滚轮时才会触发滚轮事件，光标键并拖动滚动条不会触发事件;但是，当使用光标键或鼠标滚轮拖动滚动条时，实际上会触发滚动事件。

我建议您查看以下示例： Wheel Event ，它实现了滚动操作的跨浏览器处理。

这是使用 wheel 的简短代码段（适用于现代浏览器）：

$("html").on("wheel", function (e) {
    var deltaY = e.originalEvent.deltaY;
    var scrollTop = $(this).scrollTop();
    if (deltaY > 0) { console.log("scroll down"); }
    else { console.log("scroll up"); }
});