ScrollTop animation at fixed height overflow without jank

Question

I am working on a project that uses arrow keys as a form of focus processing, and I get some big bang on scroll lists. I recreated a - JSFiddle - to show what is happening, but in the fiddle it looks better. I think this is because the elements that I redraw scrollTop are much more complicated for my application. Is there a better way to do this without using scrollTop? I understand that it causes relaying, and it was curious if there was a better way.

Here is the main code from JSFiddle -

function scroll() { var focusedBox = focused.getBoundingClientRect(); if (focusedBox.bottom > containerBox.bottom || focusedBox.top < containerBox.top) { requestAnimationFrame(function() { var distance = focusedBox.height + 10; animate(distance, focusedBox.top < containerBox.top); }); } } function animate(distance, up) { if (distance >= speed) { container.scrollTop += (up ? -speed : speed); requestAnimationFrame(function() { animate(distance - speed, up); }); } else { container.scrollTop += (up ? -distance : distance); } } 

** To try, make sure you click inside the script output area to trigger key events, then use the up / down arrows **

I also need the scroll bar to work, so if the only best option is to use CSS3 transformY, I will need to create my own scroller.

Answer 1

It's hard to say without seeing the actual code, but check out this fiddle and see if it helps anything:

http://jsfiddle.net/fxyuzo6z/4/

Basically, I removed the impulse animation that you ran on each focus event to be biased until there is a significant delay between keystrokes. This provides more resources for other animations that the browser should render, hope you clear the stutter / jank you notice. Timeout delay can be adjusted to your needs.

CSS

 .focused { -webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,1); -moz-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,1); box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,1); } .focused.animate { -webkit-animation: pulse 1.8s infinite ease-in-out; -moz-animation: pulse 1.8s infinite ease-in-out; animation: pulse 1.8s infinite ease-in-out; } 

JS:

 var pool = document.querySelectorAll('.item-row') , container = document.getElementById('item-container') , containerBox = container.getBoundingClientRect() , focused = pool[0] , focusIndex = 0 , KEYS = {up: 38, down: 40} , keypressTimer = null; window.addEventListener('keyup', function(e) { if (e.keyCode === KEYS.up && focusIndex !== 0) { focusIndex--; setFocus() } else if (e.keyCode === KEYS.down && focusIndex !== pool.length - 1) { focusIndex++; setFocus() } }); function setFocus() { clearTimeout(focused); focused.classList.remove('animate'); focused.classList.remove('focused'); focused = pool[focusIndex]; focused.classList.add('focused'); scroll(); keypressTimer = setTimeout(function() { focused.classList.add('animate'); }, 1000); } function scroll() { var focusedBox = focused.getBoundingClientRect(); if (focusedBox.bottom > containerBox.bottom || focusedBox.top < containerBox.top) { requestAnimationFrame(function() { var distance = focusedBox.height + 12; animate(distance, focusedBox.top < containerBox.top, 20); }); } } function animate(distance, up, speed) { if (distance >= speed) { container.scrollTop += (up ? -speed : speed); requestAnimationFrame(function() { animate(distance - speed, up, speed); }); } else { container.scrollTop += (up ? -distance : distance); } } 

Hope this helps!

EDIT:

I did another (insecure) hyper-optimized (hopefully) test to improve performance by uploading small calculations that you perform each time you click on a web worker. Obviously, this is not a cross-browser solution, so you decide whether to test:

http://jsfiddle.net/fxyuzo6z/5/

Answer 2

I think the problem is using animate () recursive. Can't you just replace the whole scroll function with this?

 function scroll() { $('#item-container').animate({"scrollTop": $(".focused").offset().top+$('#item-container').scrollTop()},'slow'); } 

http://jsfiddle.net/uoredfs8/5/