无限滚动滑块，使DIV无限

Question

我想使垂直滚动滑块无限长；因此，当您向下滚动到最后一个项目并再次滚动时，第一个项目会再次出现。 div（id =“ carousel”）必须是无限的。

HTML的基础：

<div id="carousel">
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
</div>

CSS：

    #carousel {
    overflow-y: auto;
    flex-direction: column;
    width: 100%;
}

#carousel img {
    width: 50%;
    height: 50%;
}

#carousel.snap {
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;
}

#carousel.snap > div {
    scroll-snap-align: center;
}

#carousel.snap {
    scroll-snap-type: mandatory;
    -ms-scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(50%);
    -ms-scroll-snap-points-x: repeat(50%);
}