I want to create a menu bar that can scroll horizontally indefinitely with CSS.

"You said ""I want to make it with CSS,"" but the manual scrolling menu, which acts like a link to a questionnaire, cannot be achieved only with the CSS functionality currently available."You must use JavaScript.

In this response, HTML, CSS will use the following code:

<div class="infinity-slide">
  <div class="slide">
    <img src="https://cdn.pixabay.com/photo/2018/04/28/22/03/dawn-3358468_1280.jpg" alt>
    <img src="https://cdn.pixabay.com/photo/2018/09/14/22/51/cobblestones-3678292_1280.jpg" alt>
    <img src="https://cdn.pixabay.com/photo/2018/06/29/22/45/wheat-3506758_1280.jpg" alt>
  </div>
</div>

.slide{
  display:flex;
  width: 50%;
  height —350px;
  overflow —auto;
}

I thought of two ways to do what the questioner wants to do.

Use the

• cloneNode method to duplicate items on the slider when the scroll position reaches the right edge.

  The good thing about this method is that when it reaches the far right, the far left element (replicated) is displayed smoothly.
  However, each time you reach the far right, the number of elements in the slider increases to .If you erase the elements added to the far right, the number of elements will not increase, but if you do not use custom data attributes, the order of the elements will be disrupted.

Use the

• scrollLeft property to return the scroll position to the beginning of the slider when the scroll position reaches the right end.

  The good thing about this is that unlike using the cloneNode method, the number of elements in the slider does not increase.If you are not allowed to add or remove elements in the slider, I think this method is easy.
  However, each time you reach the far right, the scroll position moves to the far left, so it does not work as smoothly as using the cloneNode method.

Use the cloneNode method to duplicate items on the slider when the scroll position reaches the far right.

The good thing about this method is that when it reaches the far right, the far left element (replicated) is displayed smoothly.
However, each time you reach the far right, the number of elements in the slider increases to .If you erase the elements you added to the far right, the number of elements will not increase, but if you do not use custom data attributes, the order of the elements will be disrupted.

Use the scrollLeft property to return the scroll position to the beginning of the slider when the scroll position reaches the right end.

The good thing about this is that unlike using the cloneNode method, the number of elements in the slider does not increase.If you are not allowed to add or remove elements in the slider, I think this method is easy.
However, each time you reach the far right, the scroll position moves to the far left, so it does not work as smoothly as using the cloneNode method.

Eventually, these two methods were combined to create the following code:I only made one replication and used the scrollLeft property after the second time.This allows for some smooth operation and fewer elements than simply replicating them.

Also, like Qiita's article in the questionnaire, you can write down the elements in the slider for two pairs in HTML without doing the first replication, but I chose this method because it is troublesome to write the same thing twice.

 document.querySelectorAll(".slide").forEach(e=>{
  letendOfSliderPosition=null;

  e.addEventListener("scroll", function(){
    const slider = this;

    if(slider.scrollLeft!==(slider.scrollWidth-slider.clientWidth)) return;

    if(endOfSliderPosition===null){
      endOfSliderPosition=slider.scrollLeft;
      slider.append(...slider.cloneNode(true).childNodes);
    }
    slider.scrollLeft=endOfSliderPosition;
  });
});

.slide{
  display:flex;
  width: 50%;
  height —150px;
  overflow —auto;
}

.slide>img{
  width: 100%;
  height —auto;
}

<div class="infinity-slide">
  <div class="slide">
    <img src="https://cdn.pixabay.com/photo/2018/04/28/22/03/dawn-3358468_1280.jpg" alt>
    <img src="https://cdn.pixabay.com/photo/2018/09/14/22/51/cobblestones-3678292_1280.jpg" alt>
    <img src="https://cdn.pixabay.com/photo/2018/06/29/22/45/wheat-3506758_1280.jpg" alt>
  </div>
</div>