javascript - 动画 scrollTop 在固定高度溢出时没有卡顿

Question

我正在从事一个项目，该项目使用箭头键作为焦点处理的一种形式，并且在我的列表滚动中遇到一些严重的卡顿。我重新创建了一个 -- JSFiddle -- 展示正在发生的事情，但它在 fiddle 中看起来更好。我认为这是因为我使用 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);
    }
}

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

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

Answer 1

在没有看到实际代码的情况下很难说，但请查看这个 fiddle ，看看它是否对任何事情有帮助:

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

基本上，我已经删除了您在每个焦点事件上运行的脉冲动画，以进行偏移，直到按键之间出现明显的延迟。这为浏览器需要渲染的其他动画提供了更多资源，希望能消除您注意到的卡顿/卡顿现象。可以根据您的需要调整超时延迟

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

希望这对您有所帮助!

编辑:

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

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