可通过CSS属性或伪元素自定义滚动条样式，JavaScript仅能通过切换预定义类、动态注入CSS规则或监听scroll事件间接控制，不支持直接绘制滚动条。
可以通过 CSS 的 scrollbar-width 和 scrollbar-color 属性（Firefox 支持），或 WebKit 伪元素（Chrome/Safari/Edge）配合 JavaScript 动态修改样式，但注意：JavaScript 本身不能直接“设置”滚动条样式，它只能操作 CSS 类、内联样式或动态插入/修改 CSS 规则。
用 JavaScript 切换预定义的滚动条 CSS 类
最常用且兼容性好的方式是预先在 CSS 中定义好不同滚动条样式的类，再用 JS 控制元素是否添加该类。
- 先在 CSS 中写好自定义滚动条规则，例如：
.custom-scrollbar::-webkit-scrollbar { width: 12px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #888; border-radius: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #555; }
<p>/<em> Firefox </em>/
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; }- 然后用 JS 给目标容器（如
body或某个div）添加或移除该类：
document.body.classList.add('custom-scrollbar');
// 或切换
document.body.classList.toggle('custom-scrollbar');用 JavaScript 动态注入 CSS 规则
适合需要运行时生成样式（比如根据用户偏好实时调整颜色）的场景。
- 创建
<style>标签并插入到<head>中：
const style = document.createElement('style');
style.textContent = `
.dynamic-scroll::-webkit-scrollbar-thumb {
background: ${userColor};
}
.dynamic-scroll {
scrollbar-color: ${userColor} #f0f0f0;
}
`;
document.head.appendChild(style);- 再将该类应用到目标元素上即可生效
监听滚动行为并间接影响视觉表现
虽然不能直接用 JS “画”滚动条，但可通过监听 scroll 事件，控制遮罩层、进度指示器或自定义滑块的位置和状态，实现更灵活的滚动体验。
立即学习“Java免费学习笔记（深入）”；
- 例如：显示顶部滚动进度条
- 监听
window.onscroll，计算已滚动高度占比 - 更新一个固定在顶部的
<div class="scroll-progress">的宽度
window.addEventListener('scroll', () => {
const progress = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
document.querySelector('.scroll-progress').style.width = `${progress}%`;
});注意事项与兼容性提醒
滚动条样式支持因浏览器而异，JS 只是触发手段，真正起作用的是 CSS。
- WebKit 浏览器（Chrome/Safari/Edge）支持
::-webkit-scrollbar系列伪元素 - Firefox 仅支持
scrollbar-width（auto/thin/none）和scrollbar-color（前景/背景色） - IE 不支持任何自定义滚动条 CSS，需依赖第三方库（如 perfect-scrollbar）
- 移动端 Safari 基本不支持自定义滚动条样式
