How to make an infinite sectional horizontal scroll?

Question

css

I'm trying to make an infinite horizontal scroll for a calendar. Currently available:

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

and the temporary logic for adding divs:

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

If you try to scroll while adding a new block, all blocks start to twitch. Found out that this is because of the scroll-snap-type

Actually the question is, how is it better to do an infinite sectional horizontal scroll now? Through touchmove and transform/left or are there other options?

Answer 1

Use transform to position blocks, and position each one properly. Without adding/removing elements at the beginning or at the end.