зацикливание изображений, когда свиток достигает вершины div

Question

Я пытаюсь создать бесконечный свиток, который работает вверх и вниз. до сих пор мне удалось заставить его работать при прокрутке вниз. но я не знаю, как создать бесконечную прокрутку при прокрутке вверх без перехода, который вы заметите при прокрутке до верхней части страницы.

только на обычном javascript, спасибо.

const ri = document.querySelector("#right");
const rI = document.querySelectorAll("#right img");
const rH = ri.scrollHeight;

let counter = 1;
const size = rI[0].clientHeight;
ri.scrollTo(0, size);

// infinite scroll forward
ri.addEventListener("scroll", function fS() {
  // detect bottom of div
  counter++;
  if (ri.scrollTop + ri.clientHeight >= rH) {
    ri.scrollTo(0, size);
  } else if (ri.scrollTop == 0) {
    counter--;
    // alert("reached");
    ri.scrollTo(0, size * 5);
  }
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  background-color: rgb(254, 238, 228);
  max-width: 100vw;
  min-height: auto;
}

#right {
  width: 50vw;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
}

#right a img {
  height: 92.5vh;
  width: 50vw;
  object-fit: cover;
  object-position: center;
}

<div id="right">
  <a href="project6" id="lastClone"><img src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/cloud/cumulus-cloud.jpg" /></a>
  <a href="project1"><img src="https://cdn1.epicgames.com/ue/product/Screenshot/StoreUltraDynamicSkyscreenshot1-1920x1080-f5d2cdb93df61507a2e584354de459ca-1920x1080-a431ce7a2eb0a4eb720b25de2ba0aca3.png" /></a>
  <a href="project2"><img src="https://www.rolls-roycemotorcars.com/content/dam/rrmc/marketUK/rollsroycemotorcars_com/2-6-4-under-the-stars/page-properties/rolls-royce-under-the-stars-hero-d.jpg" /></a>
  <a href="project3"><img src="https://www.citynews1130.com/wp-content/blogs.dir/sites/9/2018/05/27/iStock-697020460.jpg" /></a>
  <a href="project4"><img src="https://lh6.googleusercontent.com/GlbCESxjIY2pjzV9B9hwoySVG6sJRErg_ylUlHt2XUm2PWhDpDWBZMOkUL0s4wMImdG8LP8Xm6KfB3KPVddCiBGSJO9psgZ13DkPSjNUngDg1iyGkQvxOQXdLDp1PXyF9b-lVSQ" /></a>
  <a href="project5"><img src="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2019/07/moon_seen_from_space_station/19494773-1-eng-GB/Moon_seen_from_Space_Station_pillars.jpg" /></a>
  <a href="project6"><img src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/cloud/cumulus-cloud.jpg" /></a>
  <a href="project1" id="firstClone"><img src="https://cdn1.epicgames.com/ue/product/Screenshot/StoreUltraDynamicSkyscreenshot1-1920x1080-f5d2cdb93df61507a2e584354de459ca-1920x1080-a431ce7a2eb0a4eb720b25de2ba0aca3.png" /></a>
</div>