Javascript 带溢出的可视容器内的中心点

如何在可视容器溢出内使点居中，如图所示

当单击第一个点1到3时，它们按预期的方式粘附在顶部，从第四个点和第五个点开始，它们应调整顶部距离，使其以容器为中心，单击第六、第七、第八个点应保持在底部

当我增加总点数，比如说9或10个点数时，这个例子当然不起作用。我不能得到正确的数学公式，知道吗

非常感谢

const ul=document.getElementsByClassName（'list'）[0]；
const list=document.querySelectorAll（'.list li'）；
常数总数=5；
常数偏移=总偏移量/2；
常数圆总高度=40；
const totalview=5；
const totalHeight=circleTotalHeight*list.length；
常量totalViewableHeight=总*圆形总高度；
const LimittoOffset=totalViewableHeight-totalHeight；//-120
const halfViewableCount=Math.ceil（totalViewable/2）//3.
const half totalcount=Math.ceil（list.length/2）//4.
常数中心可视px=160；
设activeIndex=0；
设nthActiveIndex=activeIndex+1；
Array.prototype.forEach.call（list，（li）=>{
li.addEventListener（'click'，（e）=>{
让data=e.target.getAttribute（“数据编号”）；
常量preveElement=`[data number=“${activeIndex}]”；
const nextElement=`[data number=“${data}]”；
ul.querySelector（nextElement）.style.color='#FFF'；
ul.querySelector（preveElement）.style.color='#000'；
nthActiveIndex=parseInt（数据）+1；
var nthActiveOffset=nthActiveIndex-半可视计数；
if（数据<半总计计数&数据<半可视计数）{
ul.style.top='0'；
}else if（数据>半总计计数和数据>半可视计数）{
ul.style.top=`${limittooffset}px`；
}否则{
设midTopOffset=0；
if（数据<半总数计数）{
midTopOffset=（nthActiveIndex*圆形总高度）/2；
}否则{
midTopOffset=（nthActiveIndex*圆圈总高度）-160；
}
const dotContainerTopValue=midTopOffset+limitopoffset；
//警报（midTopOffset）；
如果（dotContainerTopValue>=0）{
ul.style.top='0'；
}否则{
ul.style.top=`${dotContainerTopValue}px`；
}
}
activeIndex=数据；
});
})

.list{
列表样式类型：无；
位置：绝对位置；
排名：0；
左：0；
填充：0；
保证金：0；
}
李先生{
宽度：20px；
高度：20px；
显示：块；
背景：红色；
边界半径：50%；
文本对齐：居中；
边缘顶部：10px；
边缘底部：10px；
光标：指针；
字体大小：12px；
浮动：对；
}
.列表容器{
高度：200px；
宽度：20px；
背景#42b549；
不透明度：0.5；
位置：相对位置；
保证金：自动；
顶部：160px；
}

1
2
3
4
5
6
7
8

我想我找到了一个解决方案，只是为了与大家分享。我希望不要错过任何东西

const ul = document.getElementsByClassName('list')[0];
const list = document.querySelectorAll('.list li');
const total = 5;
const offset = total / 2;
const circleTotalHeight = 30;

const totalViewable = 5;
const totalHeight = circleTotalHeight * list.length;
const totalViewableHeight = totalViewable * circleTotalHeight;
const limitTopOffset = totalViewableHeight - totalHeight; // -120
const halfViewableCount = totalViewable / 2; //2.5
const halfTotalCount = Math.ceil(list.length / 2); //4
const diffTotalAndView = list.length - totalViewable; // 3


let activeIndex = 0;
let nthActiveIndex = activeIndex + 1;

Array.prototype.forEach.call(list, (li) => {
  li.addEventListener('click', (e) => {
    let data = e.target.getAttribute("data-number");
    const prevElement = `[data-number="${activeIndex}"]`;
    const nextElement = `[data-number="${data}"]`;

    ul.querySelector(nextElement).style.color = '#FFF';
    ul.querySelector(prevElement).style.color = '#000';

    nthActiveIndex = parseInt(data) + 1;
    var nthActiveOffset = nthActiveIndex - halfViewableCount;
    var nthOffset = Math.floor(nthActiveIndex - halfViewableCount);

    if (nthOffset >= 0) {

      //console.log(nthOffset);
      if (nthOffset < diffTotalAndView) {
        var topDistance = -1 * (nthOffset * circleTotalHeight);
        ul.style.top = `${topDistance}px`;
      } else {
        ul.style.top = `${limitTopOffset}px`;
      }

    } else {
      ul.style.top = '0';
    }

    activeIndex = data;
  });
})

const ul=document.getElementsByClassName（'list'）[0]；
const list=document.querySelectorAll（'.list li'）；
常数总数=5；
常数偏移=总偏移量/2；
常数圆总高度=30；
const totalview=5；
const totalHeight=circleTotalHeight*list.length；
常量totalViewableHeight=totalViewable*圆形总高度；
const LimittoOffset=totalViewableHeight-totalHeight；//-120
const halfViewableCount=totalViewable/2//2.5
const half totalcount=Math.ceil（list.length/2）//4.
const diffTotalAndView=list.length-totalViewable；//3.
设activeIndex=0；
设nthActiveIndex=activeIndex+1；
Array.prototype.forEach.call（list，（li）=>{
li.addEventListener（'click'，（e）=>{
让data=e.target.getAttribute（“数据编号”）；
常量preveElement=`[data number=“${activeIndex}]”；
const nextElement=`[data number=“${data}]”；
ul.querySelector（nextElement）.style.color='#FFF'；
ul.querySelector（preveElement）.style.color='#000'；
nthActiveIndex=parseInt（数据）+1；
var nthActiveOffset=nthActiveIndex-半可视计数；
var nthcoffset=Math.floor（nthActiveIndex-halfViewableCount）；
如果（n偏移量>=0）{
//console.log（nthcoffset）；
如果（nthOffset

6,7,8点击一次是否要向下移动一个位置？@NullPointer否，该示例已按预期运行，但我的js代码有点硬编码，对于8个点，单击第4、第5将移动到中心，如小提琴所示。问题是，如果我想有9或10个点，小提琴中的代码就不正确，就像我有8个点一样。需要找到一个正确的数学，使计算css顶部。[这里][1][1]: