Javascript 如何保持滚动条拇指高度固定？

如何保持滚动条拇指高度固定，使其不会随着内容大小而变得越来越短。这可能吗

我刚刚为大家创建了一个片段，让大家看一看，了解一下我的想法：

var递增区间；
var递减区间；
var-ToStop=false；
函数递增高度（）{
var newHeight=$（'.force overflow'）.height（）+500；
$（'.force overflow'）.css（'height'，newHeight+'px'）；
如果（新高度>=4500）{
清除间隔（增加间隔）；
如果（ToStop==false）{
setTimeout（函数（）{DecreaseInterval=setInterval（decreaseHeight，1000）；}，3000）；
}
}
}
函数decreaseHeight（）{
var newHeight=$（'.force overflow'）.height（）-500；
$（'.force overflow'）.css（'height'，newHeight+'px'）；
如果（新高度<1000）{
清除间隔（减少间隔）；
增量间隔=设置间隔（增量高度，1000）；
ToStop=true；
}
}
增量间隔=设置间隔（增量高度，1000）
正文{
背景色：#f7f7f7；
}
.滚动条{
高度：300px；
溢出y：滚动；
保证金：0自动；
宽度：400px；
}
.强制溢出{
高度：600px；
填充：右：20px；
}
/*
*风格1
*/
.cute_滚动条：--webkit滚动条{
宽度：20px；
背景色：#f7f7f7；
}
.cute_滚动条：：-webkit滚动条轨迹{
-webkit盒阴影：插图0 0 6px#dfe0e4；
边界半径：10px；
背景色：#f8bbd0；
左边框：9.5px实心#F7F7；
右边框：9.4px实心#F7F7；
}
.cute_滚动条：-webkit滚动条拇指{
边界半径：10px；
-webkit盒阴影：插入0像素ad1457；
背景:#f5827d ;；
背景剪辑：填充框；
边框：3倍实心rgba（2451301250.4）；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
我查看后发现，仅使用css和默认滚动条是不可能的，因此我找到了另一个js自定义滚动条，并对其进行了更改，使其看起来像我的滚动条。我想它可能会帮助一些人，所以我把它贴在这里


console.log（'Start'）；
var$=document.getElementById.bind（文档），
container=$（'scrollbar-container'），
content=$（'content'），
滚动=$（“滚动条”）；
content.addEventListener（'scroll'，函数（e）{
});
var事件=新事件（“滚动”）；
window.addEventListener（'resize'，content.dispatchEvent.bind（content，event））；
内容、调度事件（事件）；
scroll.addEventListener（'mousedown'，函数（start）{
start.preventDefault（）；
变量y=scroll.offsetTop；
var onMove=函数（结束）{
var delta=end.pageY-start.pageY；
scroll.style.top=Math.min（container.clientHeight-scroll.clientHeight，Math.max（0，y+delta））+'px'；
content.scrollTop=（content.scrollHeight*scroll.offsetTop/container.clientHeight）；
};
文件。添加的文件列表器（'mousemove'，onMove）；
document.addEventListener（'mouseup'，function（）{
document.removeEventListener（'mousemove'，onMove）；
});
});
console.log（'Done'）
正文{
字体系列：草书；
背景：#eef；
}
h1{
文本对齐：居中；
}
#容器{
宽度：300px；
高度：300px；
框大小：边框框；
最大宽度：100%；
填充物：5px10px；
保证金：自动；
背景：#fff；
位置：相对位置；
}
#内容{
身高：100%；
宽度：96%；
溢出y：滚动；
}
#滚动条容器{
位置：绝对位置；
右：13px；
底部：5px；
顶部：5px；
宽度：1px；
-webkit盒阴影：插图0 0 6px#dfe0e4；
边界半径：10px；
背景色：#f8bbd0；
}
#滚动条{
位置：绝对位置；
右：-9px；
高度：13px；
宽度：13px；
边界半径：10px；
-webkit盒阴影：插入0像素ad1457；
背景:#f5827d ;；
背景剪辑：填充框；
边框：3倍实心rgba（2451301250.4）；
}
：-webkit滚动条{
显示：无；
}

自定义滚动条
Lorem ipsum dolor sit amet，是一位杰出的献身者。自由女神拉库斯、康戈·亨德雷特、法雷特拉·迪克特·梅特斯。虎口浮雕和肘部浮雕同侧前庭；在elit vel nisl调味品tincidunt eget quis turpis中的Phasellus。放置门Aliquam，中间的nisl vitae。但是尼布·洛雷姆，莫利斯坐在一个直径a的位置上，她坐在一只猫的身上。两人一组、两人一组、两人一组、两人一组、三人一组。莫比·奎斯·埃格斯塔斯·尼斯。前庭是猫的生命，前庭是猫的生命，前庭是猫的生命。奥古斯特博物馆馆长、皇家皇家博物馆馆长、拍卖人奥奇。不要在临时性的环境下工作。马利苏亚达山前的维瓦姆斯。在hac habitasse Plateum，一句名言。在faucibus mauris posuere ac.Pellentersque的一个tellus dolor，Maecenas Consequeat imperdiet lacus。在这一点上，射手座是一个变种，而不是一个精英。努克·维尔乌兰科珀·莫里斯。两个权杖都是临时的，一个是特殊的。无便利。佩伦特斯·乌兰科珀·泰勒斯·维泰尔·维泰尔·维泰尔·维泰尔·维泰尔·维泰尔·维泰尔·维泰尔·维泰尔·维泰尔·维泰尔·维泰尔·维泰尔·维泰尔·维泰尔·维泰。Phasellus eget nunc ornare，aliquet nulla eu，lacinia metus。梅塞纳斯·马克西姆斯·波尔塔·费吉亚特（Maecenas maximus porta feugiat）。佩伦特斯·菲尼布斯·努拉·奥奇，非普尔文纳自由人菲尼布斯·维塔。佩伦特斯风格的汽车，高贵的生活。暂时性静脉曲张。
我对你的答案做了一些编辑


window.addEventListener（'load'，function（）{
常量内容=文档