浏览器滚动条动画性能

Question

In short:

Why is this:

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

much much faster than this:

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

?

Background:

I am working on a website that has a animated scrolling. eg: When the user clicks a link I fire a javascript that animates the scrollbar. Something similar to this website:

http://www.fashionphotographer.it/

My first take on this problem was to animate the margin-left using jQuery.animate but this proved to be very slow (my site is very content heavy). After that I tried animating the left of a absolute element, using CSS3 and even the -webkit-transform. All solutions where slow.

My last try was to use jQuery to animate the scrollbar, and this proved to be best solution so far.

My question is: What kind of optimization is the browser (I am using Chrome) doing under the hood that makes animating the scrollbar the best solution?

Answer 1

Changing the scrollLeft property will not force a reflow of the DOM, as you are really just changing which portion of the content is visible at any one time. margin-left, left or other smiliar properties, on the other hand, may cause other elements to resize, which forces the browser to reflow the DOM.

Edit: I believe scrollLeft will force a repaint , however this is much less intensive than a reflow. See http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/ for a good explanation of the difference.