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

Question

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

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

每一秒，我使用 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)
}

Answer 1

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

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

auto continuous horizontal scroll to keep consecutively identified elements in center of view

javascript

scroll

scrollto