浏览器滚动条动画性能

Browser scrollbar animation performance

本文关键字：性能 动画 滚动条 浏览器      更新时间：2023-09-26

总之:

为什么:

$('body').animate({scrollLeft: 1000});

比这快得多:

$('body').animate({"margin-left": 1000});

?

<标题>背景:

我在一个网站上工作，有一个动画滚动。例:当用户点击一个链接时，我触发一个javascript，使滚动条动画化。类似于这个网站:

http://www.fashionphotographer.it/

我对这个问题的第一个看法是使用jQuery动画margin-left。动画，但这被证明是非常缓慢的(我的网站是非常内容繁重)。之后，我尝试动画的left的绝对元素，使用CSS3和-webkit-transform。

我的最后一次尝试是使用jQuery来动画滚动条，这被证明是迄今为止最好的解决方案。

我的问题是:什么样的优化是浏览器(我使用Chrome)做引擎盖下，使滚动条动画的最佳解决方案?

更改scrollLeft属性不会强制DOM流，因为您实际上只是更改内容的哪一部分在任何时候是可见的。另一方面，margin-left、left或其他类似的属性可能会导致其他元素调整大小，从而迫使浏览器重新流进DOM。

编辑:我相信scrollLeft将强制重新绘制，但这比回流密集得多。

相关文章：