滚动条伪元素不生效？检查是否用了 ::-webkit-scrollbar 且宿主有 overflow
Chrome、Safari 和 Edge（Chromium 内核）才支持 ::-webkit-scrollbar 系列伪类，Firefox 完全不认——这不是 bug，是标准没统一。用之前先确认浏览器目标；更关键的是，::-webkit-scrollbar 只对「有滚动行为」的容器生效，也就是必须同时满足：overflow: auto 或 overflow: scroll，且内容实际溢出。常见错误是只写了样式却忘了加 overflow，或者父容器用 overflow: hidden 把滚动条直接裁掉了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先给容器设
height或max-height，再设overflow-y: auto - 避免在祖先元素上设
overflow: hidden，尤其不要套在position: fixed的父级里 - 调试时临时加个
border: 1px solid red确认容器尺寸和溢出状态
fixed 定位的悬浮滚动条怎么对齐内容区域？别直接套在 body 上
想让自定义滚动条“悬浮”在页面右边缘、随页面滚动一直可见，很多人第一反应是给 ::-webkit-scrollbar 的轨道加 position: fixed ——但不行，伪元素不能脱离文档流，position 在这里被忽略。真正可行的做法是：用一个独立的 <div> 模拟滚动条，用 JS 同步原容器的滚动位置，并用 <code>position: fixed 定位它。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 创建一个真实 DOM 元素（比如
<div class="custom-scrollbar"></div>），放在下，不嵌套在滚动容器内 - 监听原容器的
scroll事件，用scrollTop / scrollHeight计算滑块位置，动态设置该<div> 内部滑块的 <code>top和height - 固定定位的坐标要基于视口计算：右侧留白用
right: 0，顶部对齐用top: 0，高度设为100vh，再用transform: translateY()避免抖动 - 整个悬浮滚动条容器设
pointer-events: none，只给滑块（.thumb）设pointer-events: auto - 滑块的
z-index至少比页面最高层级组件高 1，比如全局 Header 是z-index: 1000，滑块就设z-index: 1001 - 拖拽逻辑里，用
event.preventDefault()阻止默认选中，用getBoundingClientRect()算相对位置，别依赖clientY绝对值 - 给悬浮滚动条容器加
transform: translateZ(0)或will-change: transform强制 GPU 加速 - 避免在
touchmove里频繁读写scrollTop，改用requestAnimationFrame节流 - 真机测试时关掉「减少动画」系统设置，否则
transform加速可能被禁用
滚动条拖拽失效或卡顿？重点查事件捕获和 z-index 层级
模拟滚动条后，用户点击拖拽滑块没反应，大概率是事件没传到——因为 position: fixed 的悬浮层盖住了原容器的滚动区域，而你又没给它加 pointer-events: none（除了滑块本身）。另一个常见问题是滑块 z-index 太低，被其他弹窗、导航栏遮住，导致点不中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
移动端适配差？iOS Safari 对 fixed + touch 的兼容性很敏感
iOS Safari 下，position: fixed 元素在快速滚动时容易闪退或错位，尤其是配合 touchstart/touchmove 做拖拽时。根本原因是 WebKit 的合成层策略：如果 fixed 元素没触发硬件加速，滚动过程中会被频繁重绘，造成卡顿甚至消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
滚动条不是纯 CSS 能搞定的“样式问题”，一旦加了 fixed 和交互，它就成了布局、事件、性能三者咬合的节点。最常被忽略的，是把“视觉悬浮”和“行为同步”当成一回事——样式画得再准，滚动位置不同步，用户照样拖不动。
