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

希望这有帮助！

编辑：

我做了一个（未经基准测试的）超优化（希望）测试，通过将您在每个keydown上执行的次要计算卸载到Web Worker中来提高性能。显然这不是一个跨浏览器的解决方案，所以由你决定是否值得尝试：

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

Answer 2

我认为问题在于使用animate（）递归。你不能用这个替换整个滚动功能吗？

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

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

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

2 个答案: