内嵌滚动区域需综合处理样式、行为与性能：滚动条仅 WebKit 支持 ::-webkit-scrollbar，须设 overflow-y: scroll 且宽度≥6px；scroll-behavior: smooth 必写在 html 上；移动端需 fallback；避免 touchmove 中 scrollTo；虚拟滚动优化长列表；box-shadow 应加在内容容器而非 body；读取 scrollLeft/scrollTop 需 requestAnimationFrame。
内嵌滚动区域（比如 div 里套了长内容）的样式和行为，不光是加个 overflow: auto 就完事——滚动条丑、iOS 回弹失效、滚动卡顿、阴影被截断、事件冒泡干扰外层……这些问题全在真实项目里高频出现。
滚动条样式只在 WebKit 内核生效，别指望 Firefox 和 Edge 原生支持
用 ::-webkit-scrollbar 系列伪元素定制滚动条，是目前唯一被广泛支持的方案，但它只对 Chrome、Edge（Chromium）、Safari 有效。Firefox 使用的是系统级滚动条，无法用 CSS 覆盖；旧版 Edge（EdgeHTML）也不认这套规则。
-
overflow-y: scroll必须显式设置，否则::-webkit-scrollbar不触发 - 滚动条宽度设太小（如
width: 4px）在 macOS 上可能直接消失，建议最低6px - 不要给
::-webkit-scrollbar-track设border-radius太大，iOS Safari 会渲染错位 - 若需全浏览器统一外观，只能放弃原生滚动，改用
position: absolute+transform: translateY()自研滚动器（代价是失去惯性、键盘导航、无障碍支持）
scroll-behavior: smooth 必须写在 html 上，body 是无效的
很多人把 scroll-behavior: smooth 加在 body 上，结果点击锚点还是硬跳。这是因为浏览器真正的滚动容器是 html 元素，body 只是个普通子元素——它不持有滚动坐标，设了也白设。
- 必须用
html { scroll-behavior: smooth; }，且不能被其他规则覆盖（检查 DevTools 中该声明是否 strike-through） - 移动端 Safari 15.4+ 才支持，iOS 15.2 及更早版本需 fallback：
document.querySelector('#target').scrollIntoView({ behavior: 'smooth' }) - 如果目标元素是
display: none或尚未挂载（如 Vue 的v-if条件未满足），调用会静默失败，无报错提示 - 别在
touchmove事件中调用scrollTo()，会中断手势，导致“卡住”或跳变
overflow: scroll 容器本身就在悄悄吃性能
只要一个元素设置了 overflow: auto 或 scroll，Blink/WebKit 就会为它创建独立合成层，触发图层切分、光栅化、合成器线程介入——这不是加个滑条那么简单，而是启动了一整套渲染流水线。
立即学习“前端免费学习笔记（深入）”；
- 嵌套滚动（比如外层
div滚动 + 里面div也滚动）极易引发“滚动链”，造成事件冒泡混乱和边界判定抖动 - 用
overscroll-behavior: contain可阻断滚动穿透，但仅在 Chrome 63+/Firefox 93+/Safari 16.4+ 支持 - 长列表务必用虚拟滚动：真实 DOM 节点超过 200 行时，即使所有 CSS 优化都做了，主线程仍会被渲染树拖垮
- 滚动区域内的图片必须加
loading="lazy"，否则首屏加载压力翻倍
box-shadow 显示不全？别往 body 上贴
把 box-shadow 直接加在 body 上，在滚动页面时阴影常被截断——因为 body 高度被限制在视口内（如 height: 100vh 或 flex: 1），而阴影只按它的渲染尺寸画，不会随内容延伸。
- 正确做法是把阴影移到真正承载可滚动内容的容器上，比如
<main>或自定义的content-wrapper元素 - 确保该容器高度由内容撑开（即不设
height，用min-height: 100vh保底） - 若用 Bootstrap，避免同时用
h-100和min-vh-100，二者冲突会导致高度计算异常 - 内阴影（
inset）尤其敏感，一旦父容器有overflow: hidden，阴影直接被裁掉
最易被忽略的一点：嵌套滚动区域的 scrollLeft/scrollTop 读取时机。在 scroll 事件回调里直接读，大概率拿到的是上一帧的值——得用 requestAnimationFrame 包一层才准。这点在实现吸顶表头、滚动联动、进度指示时，几乎必踩。
