Javascript 狩猎中的起伏滚动

我的微网站有问题。当我滚动时，除了Safari之外，它在所有浏览器中都很好而且平滑。当我在Safari中滚动时，content div会频繁地跳转或移动（它应该保持在原来的位置），使滚动看起来很不稳定。你知道会出什么问题吗

这是网站：

---

我看了一下，确实看到了您提到的“起伏”滚动（仔细看，它是命中还是未命中-有时是平滑的，有时是非常起伏的）

似乎您在Safari上的

parallax

回调出现了一些性能问题（不过，如果Safari的实现有问题，我也不会感到惊讶…）

我建议大家看一下webkit的

requestAnimationFrame

。为了进行测试，我将更新偏移量的逻辑包装在

raf

（并缓存

窗口.pageYOffset

值）中，结果看起来更加平滑

function parallax(e) {
    window.webkitRequestAnimationFrame(function() {
        var offset = window.pageYOffset;
        a.style.top = (offset / 2) + "px";
        b.style.top = (offset / 2) + "px";
        textbox.style.top =- (offset * 0.7) + "px";
        textbox2.style.top =- (offset * 0.7) + "px";
    });
}

老实说，您可能可以对所有浏览器（如果它们支持的话）使用

raf

设置元素动画时，人们使用的另一个技巧是加速正在设置动画的元素所在的层。有几种方法可以做到这一点，但最简单的方法是使用

-webkit transition

并设置

translateZ（0）

。另外添加两行也不会有什么坏处：

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

另外，我注意到，您偏移的某些元素（使用

样式

）是

位置：相对的

——我个人认为，任何要设置动画的元素都应该是

位置：绝对的

。这将从DOM中删除元素，并且偏移它不会导致对周围元素的回流（这可能会导致您的不稳定）

编辑-我注意到的另一件事是，当你在safari上遇到橡皮圈时，会发生“起伏/怪异”（我猜是负值）。这可能也是你想看的东西

---

祝你好运

我还没有查看我的答案与杰克的答案相比如何，但我认为问题在于Safari试图非常节能。因此，除非需要，否则启用硬件加速是很犹豫的。人们用来强制硬件加速的一个常见技巧是

-webkit转换：translate3d（0,0,0）
进入正在移动的div的css。我在内容课上试过了，感觉好多了。您也可以尝试将其应用于其他层

编辑：我也将其应用于左、右文本框div，现在页面看起来和Chrome一样平滑
 我只是记下这一点，因为我今天遇到了一个溢出自动元素：

解决方案是将此规则添加到滚动条显示的任何元素：

-webkit溢出滚动：触摸

更多详细信息可在此处找到：

元素在悬停和活动状态下过度转换可能会导致渲染问题

在我们的例子中，我们在应用于悬停的某些元素上有框阴影变换。当用户滚动页面并滑动受影响的元素时，转换被触发。浏览器必须在滚动的同时完成渲染过渡的艰苦工作。
+Upvote-这是一个很好的观点Kevin（我实际上是在编辑我的答案以包括这一点：）-看起来Dominik可以做很多事情来提高总体性能-这绝对是一个巨大的问题！谢谢，我喜欢你关于使用
position:relative
进行DOM回流的观点。我不知道。谢谢你，这对滚动来说是一个很大的改进。我对你的答案投了赞成票，但是我不能选择你的答案，因为杰克在Safari中的橡皮筋滚动是正确的，这是滚动的最后一期。谢谢杰克！多好的回答，非常好。它确实帮了很多忙，但是你在Safari中的橡皮筋是对的。我确实做了你建议的更新，性能也好多了，但是我没能解决橡皮筋的问题。你能帮我吗？