在无jank的固定高度溢出中动画scrollTop

Question

我正在做一个项目，它使用箭头键作为焦点处理的一种形式，并且在我的列表卷轴上得到了一些主要的jank。我重新创建了一个--JSFiddle--来展示正在发生的事情，但在小提琴中它看起来好多了。我认为这是因为我用scrollTop重绘的元素对于我的应用程序来说要复杂得多。在不使用scrollTop的情况下，是否有更好的方法来做到这一点？我知道这会导致中继，我很好奇是否有更好的方法。

这是来自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);
    }
}

**要试用它，请确保在小提琴输出区域内单击，以便键事件触发，然后使用向下/向上箭头*

我还需要滚动条才能工作，所以如果唯一更好的选择是使用CSS3 transformY，我将不得不构建一个自定义滚动器。

Answer 1

如果没有看到实际的代码，很难说出来，但是请检查一下这把小提琴，看看它是否有帮助：

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

基本上，我已经删除了脉搏动画，您已经运行在每一个焦点事件，以抵消，直到有一个重大的延迟之间的按键。这为浏览器需要呈现的其他动画提供了更多的资源，希望能够清除您注意到的口吃/jank。超时延迟可以根据您的需要进行调整。

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;
}

联署材料：

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);
    }
}

希望这能帮上忙！

编辑：

我又做了一次(不是基准测试)的超优化测试(希望如此)，通过将您在每个按键上执行的小计算卸载到一个Web工作人员中来提高性能。显然，这不是一个跨浏览器的解决方案，因此要由您来决定它是否值得尝试：

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

Answer 2

我认为问题在于使用动画()递归。你就不能用这个代替整个滚动功能吗？

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

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