How can I make a list with infinity scrolling scroll has if it was a half circle?

Question

I have a regular list that loads 5 items at a time starting with 5 items visible.

When the user scrolls the list 5 more items are loaded, and so on until the list loads all the items.

How can I make this list look like it's a circular navigation when the user is scrolling?

I thought about making it a full circle menu but since I have no control on how many items the list will have after the user scrolled all the way, the idea is to simulate a half circle animation instead of a full circular navigation.

I've added javaScript code with the progress i've made but has some issues.

• one issue is that it should show more items on screen when scrolling
• the items on the top half, despite using the same calculations, seem to increase the distance more than the items on the bottom half. Not sure why.

Again, the idea is to simulate when scrolling, the items should more as if they were on the left half of a circle.

const container = document.querySelector(".items-selector");
const yMax = container.clientHeight/2;
const xMax = container.clientWidth-25;

container.addEventListener("scroll", function(e) {

    //must get containers on scroll to retreive current position
    var items = container.querySelectorAll(".item");
    

    for(var i = items.length-1; i >= 0; i--) {
      
        var item = items[i];
          
        var itemTop = item.getBoundingClientRect().top + item.clientHeight/2;
        var yScrollPercentage = (itemTop - yMax)/itemTop;
        var xAxisPercentage = (xMax*yScrollPercentage)/100;
        var xAmoutToRemove = (xMax-(xMax*xAxisPercentage));
        var xMove;
        

        if(itemTop >= yMax ) {
        //When item if on the bottom half of the container
           
            xMove = -1*xAmoutToRemove;  
        
        }
      
        if(itemTop < yMax) {
        //When item if on the top half of the container

            xMove = -1*xMax + ((-1*xMax) + xAmoutToRemove);  
        
        } 

        item.style.transform = "translate("+xMove+"px, 0)"
  }

}); 

.items-selector {
  overflow-x:hidden;
  overflow-y:auto;
  height:300px;
  width:350px;
}

.list {
  display:flex;
  flex-direction:column;
  gap: 48px;
  align-items:flex-end;
}

.item {
  width:50px;
  height:50px;
  background:#cecece;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:100%;
}

<div class="items-selector">
<div class="list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>