Javascript 垂直滚动条根据滚动距离逐点移动

在垂直滚动条上工作，当我们向下滚动时，棕色部分不会填满，而是根据向下滚动的距离一点一点地移动。因此，本质上，如果我们滚动到底部，棕色位将向下移动三次。到目前为止，我做了一个滚动条，填补了，但理想情况下，我希望它有一个可移动的棕色位，如所附图片中的例子。有人能帮忙吗？ 到目前为止，我的代码如下所示：

window.onscroll=（）=>{
var winScroll=document.body.scrollTop | | document.documentElement.scrollTop；
var height=document.documentElement.scrollHeight-document.documentElement.clientHeight；
变量滚动=（winScroll/高度）*100；
document.getElementsByClassName（“滚动条内部”）[0]。style.height=滚动+“%”；
};
。滚动条{
位置：固定；
最高：50%；
右：34px；
宽度：2.5px；
高度：80px；
背景色：#9595；
显示：块；
转化：translateY（-50%）；
}
.滚动条\内部：类型的第一个{
身高：20%；
背景：#ffffff；
}
.滚动条内部：第n个类型（2）{
/*身高：20%*/
背景：#ffffff；
}
#模拟内容{
宽度：150px；
高度：500px；
边框：3倍纯红；
边界半径：5px；
}

此div表示导致正文滚动的某些内容。
您试图用原始CSS做什么有点让人困惑。我不明白为什么要更改滚动条容器的高度，而不是将块重新定位在全高容器中（即
.scroll-bar\uuu-inner
）。在任何情况下，这里有一个片段，我认为它完成了您试图做的事情：


window.onscroll=（）=>{
var winScroll=document.body.scrollTop | | document.documentElement.scrollTop；
var height=document.documentElement.scrollHeight-document.documentElement.clientHeight；
var containerHeight=document.getElementsByClassName（“滚动条”）[0].clientHeight；
//范围从0到x%，其中x%为100%-（80/滚动条高度*100）
//这样，栏就不会延伸到页面之外。
var scrolled=（winScroll/高度）*（（containerHeight-80）/containerHeight）*100；
document.getElementsByClassName（“滚动条内部”）[0].style.top=scrolled+'%'；
};
。滚动条{
位置：固定；
排名：0；
底部：0；
右：34px；
宽度：5px；
背景色：白烟；
}
.滚动条\内部{
高度：80px；
背景：#333；
位置：相对位置；
}
#模拟内容{
宽度：150px；
高度：500px；
边框：3倍纯红；
边界半径：5px；
}

此div表示导致正文滚动的某些内容。