автоматическая непрерывная горизонтальная прокрутка для сохранения последовательно идентифицированных элементов в центре обзора - PullRequest
Новая
       29

автоматическая непрерывная горизонтальная прокрутка для сохранения последовательно идентифицированных элементов в центре обзора

0 голосов
/ 01 ноября 2019

Проект: https://3milychu.github.io/criminal/

У меня около 6000 делений в родительском контейнере с горизонтальной прокруткой.

Каждую секунду я прокручиваю до следующего деления, используя метод scrollTo, используя поведение: 'smooth'

Это приводит к резкому движению, останавливаясь на каждом делении перед тем, как перейти к следующему.

Есть ли способ заставить непрерывно прокручивать родительский контейнер с постоянной скоростью без остановки, сохраняя целевой 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)
}

1 Ответ

0 голосов
/ 01 ноября 2019

Для чего-то подобного лучше всего бросить свою собственную комбинацию requestAnimationFrame и вручную установить смещение контейнера для каждого кадра. В основном, подумайте об очень простой петле игрового движка. Поскольку похоже, что вы синхронизируете со звуком, вам нужна высокая точность, а переходы css могут запаздывать и, возможно, в какой-то момент рассинхронизируются.

...