视差滚动在 Internet Explorer 11 和 Safari 中卡顿

Question

我有一个针对网站滚动效果的视差解决方案，但不知何故它在 Safari 9.0.1 (Mac) 和 Internet Explorer 11 (Windows 7) 中表现不稳定。

我的解决方案使用 jQuery 1.11 并通过使用 jQuery 的 .css() 方法调整 div 的 background-position 来工作。这应该具有可以滚动的固定背景图像的视觉效果。

这是我的问题的简化演示：https://jsfiddle.net/Lypnb63c/1/

更准确地说，问题似乎与函数 dontScrollBackground().

有关

我发现的一件奇怪的事情是，一旦我用 position:fixed.

删除 div 后，大多数浏览器都会变得更加不稳定

这里是一个带有 div 元素和 position:fixed 的演示：https://jsfiddle.net/Lypnb63c/1/

问题：

1. 如果我的解决方案存在特定于浏览器的问题，有人知道吗？
2. 是否有一种简单的方法可以让它在所有主流浏览器中运行？

一个解决方案可能是使用纯 css，但我想先用我当前的解决方案尝试一下。

如有任何帮助，我将不胜感激。

Answer 1

我自己解决了这个问题。问题是第 12 行 $(this).css("background-position", "52% " + (st - y) + "px");.

我发现在代表背景的元素中添加如下样式也可以达到同样的效果：background-attachment: fixed。因此，我的问题的解决方案是将上述第 12 行更改为 $(this).css("background-attachment", "fixed");

我希望我的解决方案能帮助 运行 和我遇到类似问题的人。