scrollLeft vs css transform-translateX

Benchmark created on

Preparation HTML

<div id='container'>
<div id='scroll'>
</div>
</div>

<style>
#container {
  overflow: hidden;
  width: 500px;
  height: 500px;
  position: relative;
}
#scroll {
  width: 50000px;
  height: 500px;
  background-color: red
  position: absolute;
}
</style>

Setup

var elContainer = document.querySelector('#container');
    var elScroll = document.querySelector('#scroll');
    
    var val = 0;
    var run = function(target,fn) {
       var delta = target-val;
       if (delta > 1) {
          val += delta*0.05;
          fn(val);
          run(target,fn);
       };
    };

Test runner

Ready to run.

Testing in
TestOps/sec
Using scrollLeft
run(5000,function(v) {
   elContainer.scrollLeft = v;
});
ready
Using CSS transform
run(5000,function(v) {
   elContainer.style['-webkit-transform'] = 'translateX('+(0-v)+')';
});
ready
Using CSS left
run(5000,function(v) {
   elContainer.style.left = (0-v)+'px';
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.