Как сделать бесконечный секционный горизонтальный скролл?

Question

[Wigard]

Пытаюсь сделать бесконечный горизонтальный скролл для календаря. В данный момент имеется:

<div className="parent">
  {state.map ((_, i) => <div />)}
</div>

.parent {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;
}

.parent div {
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

и временная логика добавления div'ов:

useEffect (() => {
  setInterval (() => {
    setState (state => {
      state.push (1);
      return [...state];
    });
  }, 2000);
}, []);

Если попытаться скроллить во время добавления нового блока, все блоки начинают дергаться. Выяснил, что это из-за scroll-snap-type

Собственно вопрос, как нынче лучше делать бесконечный секционный горизонтальный скролл? Через touchmove и transform/left или есть другие варианты?

Answer 1

[profesor08]

Используй transform для позиционирования блоков, и располагай каждый как надо. Без добавления/удаления элементов в начале или в конце.