根本原因是容器未被“框住”——overflow-y: auto仅在父级有明确高度约束（如height/max-height）或overflow: hidden时才生效；常见于flex父容器无高度、子项用height: 100%依赖未约束祖先，或position: absolute脱离文档流。
为什么加了 overflow-y: auto 还是整页滚动？
根本原因不是 CSS 写错了，而是容器没被“框住”——overflow 只在有明确高度边界时才生效。常见翻车点：父级用了 display: flex 但没设 height 或 max-height；子元素写了 height: 100% 却依赖未约束的祖先高度；或者用了 position: absolute 导致父容器无法感知内容撑高。
必须在滚动容器的**直接父级**上做两件事之一：
• 设固定高度（如 height: 500px）或视口单位高度（如 max-height: 70vh）
• 或设 overflow: hidden 切断 flex 布局的默认撑满行为
滚动容器自身再加 overflow-y: auto，且避免用 height: 100%（改用 flex: 0 0 auto 或 max-height: 100%）
overflow-y: auto 和 overflow-y: scroll 怎么选？
视觉上差别不大，但行为逻辑不同，选错会引发布局抖动或空间浪费：
-
overflow-y: auto：只在内容超高的时候才显示滚动条，省空间；但 Safari 在 JS 动态插入内容后可能不重绘滚动条，需手动触发重排，例如el.style.height = el.offsetHeight + 'px' -
overflow-y: scroll：滚动条永远存在，固定占约 17px 宽度；适合表格、表单等需要 UI 高度稳定的场景，避免展开/收起时页面跳动
怎么隐藏原生滚动条但保留滚动功能？
不是删掉滚动条，而是让它“隐形但可用”。三端写法必须同时存在：
.scroll-container { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge legacy */ } .scroll-container::-webkit-scrollbar { display: none; /* Chrome/Safari/Opera */ }
注意：scrollbar-width: none 在 Firefox 中仅对 auto 有效，若用了 scroll，该声明会被忽略；::-webkit-scrollbar 必须写在真正发生滚动的元素上（比如 .modal-body），而不是它的父 wrapper。
移动端 Safari 滚不动或卡顿怎么办？
这不是 bug，是 WebKit 的渲染限制：flex 容器内的滚动区域默认不启用惯性滚动。必须在滚动容器上加：
-webkit-overflow-scrolling: touch;
这个属性只对 WebKit 内核生效（Chrome/Safari/Edge），Firefox 不识别也不需要；且必须加在实际滚动的元素上（如 .chat-list），不能加在父级；如果用了 overlay-scrollbars 等第三方库，它会接管原生滚动，这行就失效了。
另外，检查是否在滚动区里用了 display: flex; flex-direction: column 却没给子项设 flex: 1，会导致高度塌陷，max-height 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
