overflow-y: scroll 为什么有时没效果
直接加 overflow-y: scroll 却看不到滚动条？大概率是容器没设高度，或者内容根本没溢出。CSS 滚动条只在「内容高度超过容器高度」时才可能触发，而 scroll 只是强制显示滚动条轨道（哪怕没内容可滚），但前提是容器本身得是个有明确高度的“盒子”。
- 必须给容器设置
height或max-height，比如height: 200px；仅用min-height不行 - 父元素不能是
display: flex且未设align-items: flex-start等，否则子容器高度计算可能塌陷 - 如果容器里只有 inline 元素或未清除浮动的内容，
height可能不生效，建议加overflow: hidden触发 BFC
Chrome/Firefox 中滚动条宽度不一致怎么办
不同浏览器默认滚动条宽度不同（Chrome 约 17px，Firefox 更窄，Safari 在 macOS 上甚至默认隐藏），overflow-y: scroll 只保证轨道存在，不控制尺寸。真要统一视觉，得靠自定义滚动条样式，但注意兼容性。
- WebKit 内核（Chrome/Safari）可用
::-webkit-scrollbar系列伪元素调整，例如：div { overflow-y: scroll; }<br>div::-webkit-scrollbar { width: 8px; }<br>div::-webkit-scrollbar-thumb { background: #ccc; } - Firefox 111+ 支持
scrollbar-width（仅限auto/thin/none），不支持设像素宽度 - 别依赖自定义滚动条做布局——它的宽度不参与盒模型计算，可能导致内容被遮挡或换行异常
移动端 Safari 强制显示滚动条会失效
iOS Safari 默认隐藏滚动条，即使写了 overflow-y: scroll，也只在滚动时短暂浮现。这不是 bug，是系统级行为，无法用纯 CSS 强制常显。
- 加
-webkit-overflow-scrolling: touch可启用原生惯性滚动，但依然不解决“常显”问题 - 想让用户明确感知可滚动，得靠视觉提示：比如渐变遮罩、箭头图标、或顶部/底部留白暗示
- 若业务强依赖滚动条可见（如拖拽定位），需改用 JS 模拟滚动容器（例如
position: relative+transform: translateY()），但会丢失原生滚动性能和惯性
overflow-y: scroll 和 overflow-y: auto 的关键区别
两者最大差异不在“是否显示”，而在“是否预留空间”。scroll 会让浏览器始终为垂直滚动条保留宽度（哪怕内容很短），导致容器可用宽度减少；auto 则只在需要时才出现，不占位。
立即学习“前端免费学习笔记（深入）”；
- 用
scroll的典型场景：左右并排两个等宽区域，右侧需固定宽度，避免因滚动条出现/消失导致左侧内容晃动 - 用
auto更常见，尤其响应式页面——省空间、更自然 - 在 flex 或 grid 布局中，
scroll可能触发额外的重排，因为滚动条宽度会影响剩余空间分配
overflow-y: scroll 是最表层的动作。 
