JavaScript可通过隐藏原生滚动条、监听scroll事件更新自定义滑块位置尺寸、绑定mousedown/mousemove实现拖拽、click实现轨道点击跳转，来模拟滚动条效果。
JavaScript DOM 操作本身不直接绘制滚动条，但可以通过隐藏原生滚动条 + 监听滚动行为 + 手动控制一个自定义 UI 元素来模拟滚动条效果。核心思路是：用 CSS 隐藏默认滚动条，用 JS 获取滚动状态并驱动自定义滑块位置和尺寸，再通过事件绑定实现拖拽和点击跳转。
1. 隐藏原生滚动条并准备容器结构
先用 CSS 彻底隐藏浏览器默认滚动条，同时确保内容区域仍可滚动（靠 overflow 和内部高度撑开）：
对应 CSS（以垂直滚动为例）：
.scroll-container {
position: relative;
overflow: hidden; /* 关键：隐藏原生滚动条 */
height: 400px;
}
.scroll-content {
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: none; /* Firefox */
scrollbar-color: transparent transparent;
}
.scroll-content::-webkit-scrollbar {
display: none; /* Chrome/Safari 隐藏 */
}
2. 同步滚动位置与自定义滑块
监听 .scroll-content 的 scroll 事件，实时计算滑块位置和高度，并更新其 transform 或 top 值：
- 滑块高度 = 容器可视高度 / 内容总高度 × 滚动条轨道高度
- 滑块 top = 当前 scrollTop / (内容总高度 − 容器高度) × (轨道高度 − 滑块高度)
示例 JS：
const container = document.querySelector('.scroll-container');
const content = document.querySelector('.scroll-content');
const thumb = document.querySelector('.scroll-thumb');
const trackHeight = container.clientHeight;
function updateThumb() {
const maxScroll = content.scrollHeight - container.clientHeight;
const ratio = maxScroll > 0 ? content.scrollTop / maxScroll : 0;
const thumbHeight = Math.max(30, (container.clientHeight / content.scrollHeight) * trackHeight);
const thumbTop = ratio * (trackHeight - thumbHeight);
thumb.style.height = `${thumbHeight}px`;
thumb.style.top = `${thumbTop}px`;
}
content.addEventListener('scroll', updateThumb);
updateThumb(); // 初始化
3. 实现拖拽滚动（关键交互）
让滑块支持鼠标拖拽：记录鼠标按下时的偏移，绑定 mousemove 更新 scrollTop，mouseup 时解绑：
- mousedown 时保存：当前 thumb 的 top、鼠标 Y 坐标、内容当前 scrollTop
- mousemove 时计算新 scrollTop = 当前内容高度 × (新 thumb top / 可滚动范围)
- 注意限制 thumb top 在合法范围内（0 到 trackHeight − thumbHeight）
简略逻辑：
let isDragging = false;
let startY, startTop, startScroll;
thumb.addEventListener('mousedown', e => {
isDragging = true;
startY = e.clientY;
startTop = parseFloat(thumb.style.top) || 0;
startScroll = content.scrollTop;
document.addEventListener('mousemove', onDrag);
document.addEventListener('mouseup', onDragEnd);
});
function onDrag(e) {
if (!isDragging) return;
const deltaY = e.clientY - startY;
const newTop = Math.max(0, Math.min(trackHeight - thumb.offsetHeight, startTop + deltaY));
thumb.style.top = `${newTop}px`;
const ratio = newTop / (trackHeight - thumb.offsetHeight);
content.scrollTop = ratio * (content.scrollHeight - container.clientHeight);
}
4. 补充点击轨道跳转功能
点击滚动条轨道空白处，让内容滚动到对应位置：
- 给 .custom-scrollbar 绑定 click 事件
- 计算点击点相对于轨道顶部的 offset
- 换算成内容 scrollTop 并赋值，同时触发 updateThumb 同步滑块
document.querySelector('.custom-scrollbar').addEventListener('click', e => {
if (e.target === thumb) return;
const rect = e.currentTarget.getBoundingClientRect();
const clickY = e.clientY - rect.top;
const ratio = clickY / trackHeight;
content.scrollTop = ratio * (content.scrollHeight - container.clientHeight);
});
不复杂但容易忽略：需在内容动态变化（如加载更多）后重新调用 updateThumb；移动端还需处理 touch 事件替代 mouse；滚动平滑可用 requestAnimationFrame 优化性能。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
