Parallax滚动在InternetExplorer11和Safari中是断断续续的

Parallax scrolling is stuttering in Internet Explorer 11 and Safari

本文关键字：断断续续 Safari 滚动 InternetExplorer11 Parallax      更新时间：2023-09-26

我有一个网站类似视差滚动效果的解决方案，但不知何故，它在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，大多数浏览器就会变得更加不稳定。

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

问题：

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

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

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

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

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

我希望我的解决方案能帮助像我一样遇到类似问题的人。

相关文章：