动画scrollTop固定高度溢出没有jank

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/

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

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/