Run results for: scrolltop - MeasureThat.net

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:53.0) Gecko/20100101 Firefox/53.0

Browser: Firefox 53

Operating system: Windows

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
vanilla anim	344609.1 Ops/sec
anim2	400134.1 Ops/sec

HTML Preparation code:

<div id="parent">
<div id="child">
<div id="target">target</div>
<div class="noid">noid</div>
</div>
</div>

Script Preparation code:

function gid(id) {
	return document.getElementById(id);
}

duration = 400;
parent = gid("parent");
target = gid("target");
preoffset = parent.offsetHeight/2 + parseInt(getComputedStyle(parent).marginTop);


function anim (parent, target, duration) {
  //console.log(parent, target, duration);
  var oldtime = null;
  var scrolltoOffset = target.offsetTop - preoffset;
  function step (framereadytime) {
    if (!oldtime) oldtime = framereadytime;
    var progress = framereadytime - oldtime;
    //console.log(parent, target, duration);
    if(progress < duration && callback(progress) !== false) {
      rafid = requestAnimationFrame (step);
    }
  }
  function callback (delta) {
  	parent.scrollTop = scrolltoOffset * delta/duration;
  }
  var rafid = requestAnimationFrame (step);
  setTimeout(function() {
  	cancelAnimationFrame(rafid);
  }, duration)
}
function step1 (timestamp) {
    if (!start) start = timestamp;
  	var progress = timestamp - start;
  	parent.scrollTop = Math.min(progress*goffset / duration, goffset);
  	if (progress < duration) {
   		requestAnimationFrame(step1);
  	}
}
function anim1 (parent, target, duration) {
  	start = null;
  	goffset = target.offsetTop - preoffset;
  	requestAnimationFrame(step1);
}

Tests:

anim (parent, target, duration);
test
1+1