Animating scrollTop in fixed height overflow without jank

Question

I am working on a project that uses the arrow keys as a form of focus handling, and am getting some major jank on my list scrolls. I recreated a --JSFiddle-- to show what is going on, but it looks way better in the fiddle. I think this is because the elements I'm redrawing with scrollTop are much more complex for my application. Is there a better way to do this without using scrollTop? I understand that it is causing relayouts, and was curious if there was a better way.

Here is the main code from the --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 it out, make sure you click inside the fiddle output area so that the key events will trigger, then use the down/up arrows **

I also need the scrollbar to work, so if the only better option is to use CSS3 transformY, I would have to build a custom scroller.

Answer 1

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

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

Basically I have removed the pulse animation that you have running on every focus event to be offset until there is a significant delay between keypresses. This gives more resources to the other animations that the browser needs to render, hopefully cleaning up the stutter/jank you are noticing. The timeout delay can be adjusted for 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);
    }
}

Hopefully this helps!

EDIT:

I did one more (not benchmarked) hyper-optimized (hopefully) test to increase performance by offloading the minor computations you are performing on every keydown into a Web Worker. Obviously this is not a cross-browser solution so it's up to you to determine if it's worth trying out:

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