
原生 js 自制 scrollbar 滑块拖动卡顿问题
在制作原生 js 的 scrollbar 时,如果滑块拖动时出现卡顿,可能的原因是以下 javascript 代码中存在问题:
const scrollmove = (e: mouseevent) =youjiankuohaophpcn {
...
this.setposition(originleft + move);
}这个代码中的 setposition 函数负责根据鼠标移动的距离更新滑块的位置。原作者提到,代码中对滑块的位置判断有误,导致滑块到达边界时不再移动,从而造成卡顿。
已修复的 setposition 函数如下所示:
setPosition(top: number) {
if (top < 0) top = 0;
if (top > this.scrollTrack.getBoundingClientRect().height * (1 - this.ratio)) {
top = this.scrollTrack.getBoundingClientRect().height * (1 - this.ratio);
}
this.scrollThumb.style.top = `${top}px`;
}这个修复版本不再使用条件判断来执行下一步操作。而是将鼠标滑动的距离做判断,超过边界后,直接将参数值固定在边界。这样,滑块的移动事件每次循环都会执行,避免了卡顿问题。










