javascript - 自动连续水平滚动以将连续识别的元素保持在视图中心

Question

项目：https ://3milychu.github.io/criminal/

我在水平滚动父容器中有大约 6000 个 div。

每一秒，我使用 scrollTo 方法滚动到下一个 div，使用行为：'smooth'

这会导致突然的运动，在每个 div 处停止，然后再继续下一个。

有没有办法让父容器以一致的速度连续滚动而不会停止，同时将目标 div 保持在视口中心的每一秒？

function sonify(data){
    var counter = -1;
    setInterval(function() {
        if(counter<6172){
            counter++
            container = document.querySelector('#track1')
            person = document.querySelector('#person'+counter)
            hover(person)
            target=person.offsetLeft - window.innerWidth/2;
            container.scrollTo({
              left: target,
              behavior: 'smooth'
            });
            playVerdict(data,counter)
            playPriors(data, counter)
            playFelonies(data,counter)
            playFemale(data,counter)
            }
    },808)
}

标签： javascriptscrollscrollto

Answer 1

对于这样的事情，你最好的选择是自己滚动requestAnimationFrame并手动设置每帧的容器偏移量。基本上想到了一个很简单的游戏引擎循环。由于看起来您正在与音频同步，因此您需要高精度，并且 css 转换可能会滞后并且可能会在某些时候不同步。