原生 js 自制 scrollbar 滑块拖动卡顿问题
在制作原生 js 的 scrollbar 时，如果滑块拖动时出现卡顿，可能的原因是以下 javascript 代码中存在问题：
const scrollmove = (e: mouseevent) => { ... this.setposition(originleft + move); }
登录后复制
这个代码中的 setposition 函数负责根据鼠标移动的距离更新滑块的位置。原作者提到，代码中对滑块的位置判断有误，导致滑块到达边界时不再移动，从而造成卡顿。
已修复的 setposition 函数如下所示：
setPosition(top: number) { if (top this.scrollTrack.getBoundingClientRect().height * (1 - this.ratio)) { top = this.scrollTrack.getBoundingClientRect().height * (1 - this.ratio); } this.scrollThumb.style.top = `${top}px`; }
登录后复制
这个修复版本不再使用条件判断来执行下一步操作。而是将鼠标滑动的距离做判断，超过边界后，直接将参数值固定在边界。这样，滑块的移动事件每次循环都会执行，避免了卡顿问题。
以上就是原生JS滚动条滑块拖动卡顿如何解决？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2649866.html
