简体繁体 English

CSS'background-attachment：fixed'非常落后

[英]CSS 'background-attachment:fixed' is very laggy

原文 2014-02-19 05:41:27 8 1 javascript/ html/ css/ performance/ background-attachment

This is question has been asked before but with little fanfare/with little insight about how to fix it or any workarounds. 这是以前曾被问过的问题，但夸张地说/对如何解决它或任何变通办法的见解很少。 Plus it has been 2 years since and I figure it's a good time to re-investigate: 距现在已经两年了，我认为现在是重新调查的好时机：

Stack Overflow Question: How can I prevent background-attachment:fixed; 堆栈溢出问题： 如何防止背景附着：固定； from lagging my website? 从滞后我的网站？

Stack Overflow Question 2: My fixed background made scrolling the site very slow, what can I do to improve it? 堆栈溢出问题2： 我固定的背景使网站滚动非常缓慢，该怎么做才能改善它？

Discussion here: https://code.google.com/p/chromium/issues/detail?id=90637 此处讨论： https : //code.google.com/p/chromium/issues/detail?id=90637

As you can see, I'm using background-attachment:fixed on 3 separate sections of this website: 如您所见，我正在使用background-attachment:fixed在该网站的3个不同部分中：

http://agoodman.com.au/updated/ http://agoodman.com.au/updated/

using Chrome's timeline console it seems that the entire page is being repainted with every scroll down the page. 使用Chrome的时间轴控制台，页面的每次向下滚动似乎都在重绘整个页面。 This can be quite laggy especially on older computers. 尤其是在较旧的计算机上，这可能会很麻烦。 I'm using a rMBP and it's quite laggy for me as well. 我正在使用rMBP，这对我来说也很滞后。

Question is: (a) are there any workarounds for this available, and (b) are there any javascript alternatives for background-attachment:fixed which give better performance? 问题是：（a）对此有任何解决方法，并且（b）对于background-attachment:fixed是否有任何JavaScript替代方法可以提供更好的性能？

1 个解决方案

Yes, there's a good javascript alternative called scrollmagic that may help you. 是的，有一个很好的javascript替代方法叫做scrollmagic ，它可以为您提供帮助。

I successfully changed my background-attachment:fixed to use the pin function. 我成功更改了background-attachment:fixed为使用background-attachment:fixed功能。 You can find a good example here . 您可以在这里找到一个很好的例子。