overflow-y: scroll 强制显示垂直滚动条，overflow-y: auto 仅在内容溢出时显示；后者更常用，前者适用于需滚动条位置固定的场景。
overflow-y: scroll 和 overflow-y: auto 有什么区别
关键看要不要“永远显示滚动条”。overflow-y: scroll 强制显示垂直滚动条，哪怕内容根本没溢出；overflow-y: auto 只在内容实际超出容器高度时才出现滚动条——多数场景该用 auto，避免无意义的占位和视觉干扰。
常见错误现象：用了 scroll 后右侧多出一道灰条，但内容很短，完全不需要滚动；或者在 Safari 上滚动条遮挡内容（因默认样式未重置）。
-
auto是更安全的默认选择，尤其在响应式布局中 -
scroll适合需要滚动条位置固定的 UI 控件（比如固定高度的日志面板） - 部分旧版 iOS Safari 对
auto响应不及时，内容动态加载后可能不自动触发滚动条显示，需手动触发element.style.height = element.scrollHeight + 'px'或重排
为什么设置了 overflow-y: auto 却没滚动效果
大概率是容器没设高度，或子元素塌陷导致“没有溢出”。CSS 的 overflow 系列属性只对**有明确高度限制**的块级容器生效。
使用场景：常见于 div 包裹列表、日志、弹窗内容等需要局部滚动的区域。
立即学习“前端免费学习笔记（深入）”；
- 必须给容器设置
height或max-height（推荐后者，更灵活） - 避免父容器用
display: flex且未设flex-shrink: 0，否则子容器高度可能被压缩为 0 - 检查子元素是否用了
float或绝对定位导致脱离文档流，造成容器高度坍缩 - 如果子元素是
table，注意table-layout: fixed可能影响高度计算
滚动条样式怎么自定义（特别是 Chrome / Edge）
原生滚动条默认丑且难控制，但 WebKit 内核（Chrome、Edge、Safari）支持 ::-webkit-scrollbar 伪元素定制。Firefox 不支持，只能靠 JS 库或接受默认样式。
性能影响小，但过度复杂样式（如动画、渐变）可能在低端设备上引发轻微卡顿。
- 必须同时定义
::-webkit-scrollbar（整体）、::-webkit-scrollbar-track（轨道）、::-webkit-scrollbar-thumb（滑块）才有效 - 滑块最小高度由浏览器限制（通常 ≥ 24px），设
min-height: 24px更稳妥 - 不要用
background: transparent给滑块，部分版本会失效；改用rgba(0,0,0,0.2) - 示例：
div::-webkit-scrollbar { width: 8px; }<br>div::-webkit-scrollbar-track { background: #f1f1f1; }<br>div::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
移动端触摸滚动卡顿或失效怎么办
核心问题是 iOS 和部分安卓 WebView 默认禁用非 body 元素的惯性滚动。只加 overflow-y: auto 不够，还得告诉浏览器“这个区域允许平滑拖拽”。
兼容性影响大：iOS 13+、Android Chrome 56+ 支持良好，但低版本安卓 WebView 可能仍需额外 hack。
- 必须加上
-webkit-overflow-scrolling: touch（仅 Safari 有效，已废弃但仍是必需项） - 容器需有
position: relative或transform: translateZ(0)触发硬件加速（解决部分安卓卡顿） - 避免在滚动容器内监听
touchmove并调用preventDefault()，否则会直接禁用原生滚动 - 如果内容是图片或 iframe，确保它们没设置
width: 100%导致重绘抖动；可加will-change: transform微优化
max-height 计算时机、WebKit 伪元素作用域、以及移动端的硬件加速触发条件，稍不注意就变成“看起来写了，其实没生效”。 
