4

我创建了一个网站，它使用一些热的 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() 事件）并且无法使其平滑（50m/s 不稳定，因为它没有足够的触发，10m/s只是因为它似乎很频繁而变得神经质？）。

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

4

2 回答 2

0

我查看了您的网站和campaignmonitor.com。你的似乎工作正常，而另一个显示你描述的波涛汹涌的滚动。

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

我在一些元素上使用 firebug 测试了更改，它似乎可以解决问题。

希望有帮助。

于 2011-10-16T10:12:45.363 回答
0

Scroll Event实际上会为每个滚动动作触发很多次（在某些浏览器如 Firefox 中），因此处理滚动的更好方法是Wheel Event。

注意：wheel 事件仅在使用 mousewheel 时触发，光标键和拖动滚动条不会触发事件；然而，滚动事件实际上是在拖动滚动条时触发的，也使用光标键或鼠标滚轮。

我建议查看此示例：stackoverflow.com/a/24815216...它为滚动操作实现了跨浏览器处理。

这是一个使用轮子的简短片段（适用于现代浏览器）：

$("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"); }
});
于 2014-07-17T03:39:48.040 回答