Canvas无法原生支持滚动条，所谓“自定义滚动条”实为在画布上手动绘制控件并结合事件、坐标计算与偏移逻辑模拟滚动；其核心是通过UI绘制、滚动状态管理和动态裁剪重绘三要素实现局部内容精确控制。
Canvas本身不支持原生滚动条，所谓“Canvas实现自定义滚动条”，本质是在Canvas画布上**手动绘制滚动条控件**，并配合鼠标/触摸事件、坐标计算与内容偏移逻辑，模拟滚动行为。这不是给Canvas加滚动条，而是用Canvas画一个滚动条，并让它控制画布内内容的可视区域。
为什么不能直接用CSS overflow
当Canvas内容超出容器时，设置父div的overflow: scroll确实能触发浏览器滚动条——但这属于**容器级滚动**，滚动的是整个Canvas元素（含空白区域），而非Canvas内部绘制的内容。若需精确控制表格、图表或长列表在Canvas内的局部显示（比如只滚数据行、保持表头固定），就必须放弃浏览器滚动条，改用Canvas自绘滚动条+手动重绘机制。
核心实现三要素
1. 滚动条UI绘制
在Canvas右边缘或底部，用fillRect、strokeRect、fillText等方法画出滑块、轨道、箭头。滑块高度 = 可视区高度 ÷ 总内容高度 × 轨道长度，需实时计算。
2. 滚动状态管理
维护一个scrollY（或scrollX）数值，表示当前向上偏移的像素量。该值由鼠标拖拽、滚轮、点击轨道等事件更新，并约束在[0, maxScroll]范围内。
3. 内容动态裁剪与重绘
每次scrollY变化，清空Canvas，然后调用ctx.save() → ctx.translate(0, -scrollY) → 绘制全部内容 → ctx.restore()；或更高效地，只绘制当前可视区域内的行/块（避免全量重绘）。
适配交互的关键细节
- 监听
mousedown判断是否点中滑块，进入拖拽模式；记录初始滑块位置和鼠标Y坐标差值 - 绑定
mousemove实时计算新滑块位置，同步更新scrollY，再触发重绘 - 对
wheel事件做deltaY累加，按步长（如每滚120px对应1行）调整scrollY - 点击轨道上下空白区时，滑块跳转到对应位置，
scrollY按比例跳变 - 移动端需兼容
touchstart/touchmove，注意阻止默认行为防止页面误滚动
与真实DOM滚动条的区别
自绘滚动条完全可控：可定制样式（圆角、渐变、图标）、响应速度、拖拽阻尼、惯性滚动（需自行实现时间轴动画）；但代价是代码量增加、需处理边界情况（如内容高度动态变化时重算滑块尺寸）、且无法被屏幕阅读器识别。适合高性能要求或强定制需求的场景，比如Canvas表格、流程图编辑器、游戏UI等。
