overflow-y: scroll 强制始终显示垂直滚动条，预留约17px宽度导致布局偏移；应优先用 auto 实现按需显示，必要时配合 padding-right 或 scrollbar-gutter: stable 修复。
overflow-y: scroll 会让容器永远显示垂直滚动条
这是最常被误解的一点：overflow-y: scroll 不是“有内容溢出才显示滚动条”，而是**强制始终显示垂直滚动条**，哪怕内容根本没超出容器高度。浏览器会预留滚动条宽度（通常约17px），导致内容区变窄，可能引发布局偏移或换行异常。
常见错误现象：div 宽度设为 100%，加了 overflow-y: scroll 后右侧出现横向滚动条，或内部文字突然折行——大概率就是滚动条占位导致的宽度挤压。
- 想“按需显示”滚动条，用
overflow-y: auto更合理 - 若必须用
scroll（比如 UI 一致性要求），建议配合padding-right补齐滚动条宽度，或用scrollbar-gutter: stable（现代浏览器支持）保留空白槽位 -
overflow-y: scroll对flex或grid子项的尺寸计算有影响，尤其当父容器未设明确height时，可能触发意外的最小高度收缩
必须设置 height 或 max-height 才能触发 overflow-y 生效
overflow-y 是“溢出行为”，没有溢出就没有行为。而 CSS 中“溢出”需要一个明确的块级约束高度——仅靠 min-height 或内容自然撑高是不够的。
典型场景：一个卡片容器希望限制最大高度、内容多时可滚动，但写了 overflow-y: auto 却完全不滚动。
- 检查是否设置了
height、max-height或flex: 1（在 flex 容器中能提供有效约束） - 避免用
height: 100%却没给所有父级设高度——逐层向上查，缺一层就失效 - 在 Grid 布局中，可用
grid-template-rows: 1fr替代height: 100%，更可靠
滚动条样式兼容性差，别依赖 appearance 或 width 直接控制
Chrome/Edge 支持 ::-webkit-scrollbar，Firefox 从 64+ 支持 scrollbar-width 和 scrollbar-color，Safari 目前几乎不支持自定义。试图用 width: 8px 直接改滚动条宽度，在非 WebKit 浏览器里完全无效。
错误做法：写一堆 ::-webkit-scrollbar 规则后，发现 Firefox 下滚动条又粗又丑，还遮挡内容。
- 基础可用方案：用
scrollbar-width: thin（Firefox） +::-webkit-scrollbar（Chrome/Edge），Safari 只能接受默认 - 慎用
overflow-y: overlay（已废弃），现代替代是scrollbar-gutter: stable both-edges配合透明滚动条视觉模拟 - 如果设计强依赖滚动条宽度（如右侧固定操作栏对齐），优先考虑 JavaScript 动态测宽或服务端 UA 判断降级
移动端 touch 滚动卡顿？检查是否禁用了 -webkit-overflow-scrolling
iOS Safari 旧版（iOS 12 及以前）默认对 overflow: auto/scroll 容器启用原生平滑滚动，但某些 CSS 属性（如 transform、will-change）会意外关闭它，导致拖拽迟滞、回弹失效。
虽然 -webkit-overflow-scrolling: touch 已被标记为废弃，但在 iOS 12–14 的实际项目中仍有生效需求。
- 只在 iOS 真机测试时暴露问题，模拟器可能表现正常
- 添加
-webkit-overflow-scrolling: touch后，务必测试是否引发新问题：例如输入框聚焦时滚动错位、fixed 元素跟随异常 - 现代方案是用
overscroll-behavior-y: contain防止滚动穿透，但不解决卡顿本身；真正根治需升级到 iOS 15+ 并弃用该属性
overflow-y: scroll 在不同环境里表现完全不同。动手前先确认你到底要“强制显示”还是“按需显示”，再决定用 scroll 还是 auto。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
