虚拟滚动中自定义滚动条易失效，因依赖overflow触发机制而干扰scrolltop、scrollheight及占位结构；须仅作用于固定高度的外层容器.viewport，禁用占位层溢出，thumb最小高度≥24px，移动端用transform: scale放大热区，且样式须置于css顶层而非@media/@supports内。
滚动条样式能改，但改完虚拟滚动就可能失效——因为自定义滚动条常依赖 overflow 触发机制，而虚拟滚动对容器的 scrollTop、scrollHeight 和占位结构极其敏感。直接套用 CSS 自定义滚动条，大概率导致滚动条长度错、拖不动、滑到底部不触发更新。
为什么 ::-webkit-scrollbar 会破坏虚拟滚动
Chrome/Safari 的 ::-webkit-scrollbar 系列伪元素只作用于原生可滚动容器（即 overflow-y: auto 且内容高度 > 容器高度的元素）。但虚拟滚动的“可滚动容器”必须满足两个硬条件：固定高度 + 内部有占位层撑开 scrollHeight。一旦你加了 height: 100%; overflow-y: auto 却没设占位层，scrollHeight 就是错的；而加了占位层后，若再叠加 ::-webkit-scrollbar-track 的 background 或 border，某些 Android WebView 会重算滚动上下文，导致 scrollTop 跳变。
- 不要给占位层（
.phantom）或内容层（.list-items）设overflow——它们不是滚动源 - 滚动条样式只能加在外层容器（
.viewport）上，且该容器必须同时满足：height固定、overflow-y: auto、子元素第一个是.phantom -
::-webkit-scrollbar-thumb的min-height必须 ≥ 24px，否则 iOS Safari 会忽略拖拽事件，表现为“能看不能拉”
移动端适配时滚动条宽度与点击热区冲突
iOS Safari 默认滚动条宽仅 8px，且无 hover 状态；Android Chrome 可通过 width 设置但最小有效值为 6px。问题在于：手指触控需要至少 44×44px 的点击热区，而原生滚动条 thumb 太窄，用户实际点不到。强行加 padding 或 margin 会撑开容器，导致 scrollHeight 计算偏移，进而使滚动条长度失准。
- 正确做法是用
transform: scale(1.5)放大 thumb，再用transform-origin: center保持居中，避免位移 - 禁用
scrollbar-width: thin（Firefox 移动版不支持），它会让 thumb 宽度归零 - 若需更可靠热区，建议放弃原生滚动条，用绝对定位的自定义 thumb +
touchstart/move手动控制.viewport.scrollTop，但必须同步节流并绑定requestAnimationFrame
表格虚拟滚动中滚动条与 position: sticky 表头共存失效
当 <thead> 用 <code>position: sticky; top: 0 固定，外层容器又启用了虚拟滚动，常见现象是：滚动条出现但无法拖动，或表头在滚动中途突然消失。根本原因是 sticky 元素的定位上下文被虚拟滚动的 position: relative 容器截断，且部分 Android WebView 对 sticky + transform 混合渲染存在合成层 bug。
- 必须把
<thead> 提到虚拟滚动容器之外，作为兄弟节点存在（即 <code><table> 分拆为 <code><thead> + <code><div class="viewport"> <div class="phantom"></div> <div class="list-items"></div> </div>） <thead> 需手动监听 <code>.viewport的scroll事件，并用transform: translateY()同步位移，而非依赖 sticky- 禁用
contain: paint在<thead> 上，它会阻止浏览器将表头提升为独立图层，导致滚动时闪烁 <p>最易被忽略的一点：所有滚动条样式规则必须写在 CSS 文件顶层，不能包裹在 <code>@media或@supports中——WebKit 内核在解析伪元素时会跳过条件规则，导致样式丢失，而你很难从 DevTools 里发现这点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
