父元素滚动条消失的根本原因是position: absolute/fixed使子元素脱离文档流，导致父容器高度坍缩为0，无法触发overflow；解决需明确滚动主体或用min-height等主动占位。
不是元素“无法触发” scroll 事件，而是它根本不在父元素的滚动内容流里——position: absolute 的元素不参与父容器尺寸计算，父容器高度为 0px 时，overflow 压根不生效，自然也监听不到 scroll。
父容器 height 为 0 是根本原因
绝对定位元素脱离文档流，不会撑开父容器。如果父容器只包含一个 position: absolute 子元素，又没设 height、min-height 或其他内容，它的 computed height 就是 0px。
- 用 DevTools 检查父容器的
Computed → height，若显示0px，就确认了问题根源 -
min-height比height更实用：内容少时保最小可视区，内容多时自动扩展 - 若高度靠 JS 动态渲染（如异步插入列表），必须在 DOM 插入后手动触发重排，或显式设置
min-height
scroll 事件监听对象选错了
scroll 事件只触发在**实际发生滚动的元素**上，不是“有 overflow 的父容器”就一定可监听——它得先有滚动能力。
- 监听目标必须是那个设置了
overflow-y: auto且有真实高度的容器（比如.scroll-container） - 不要监听
document或window，除非你真想捕获页面级滚动 - 如果父容器用了
transform（如scale(0.95)），可能创建新 containing block，导致 scroll 事件绑定失效或行为异常
absolute 元素本身不响应 scroll，但可以“被滚动”
只要父容器是已定位祖先（position: relative 等），且设置了 overflow: scroll，里面的 position: absolute 元素会随内容区一起位移——这不是它自己在滚，而是整个 containing block 在动。
- 漏写
position: relative→ 子元素锚定到body，滚动时“飞走” - 写了
position: relative但没配top/left→ 定位上下文存在，但偏移基准不稳定 - 想让 badge 始终贴右上角？确保它 top/left 相对于父容器 padding box 计算，且父容器有
overflow和真实高度
移动端 iOS Safari 的兼容性坑
iOS Safari 对 position: absolute + overflow: auto 组合支持较弱，尤其在快速滚动或嵌套场景下容易卡顿或事件丢失。
- 老版本需加
-webkit-overflow-scrolling: touch（虽已废弃，但 2026 年仍有部分存量设备依赖） - 避免在滚动容器内嵌套多层
position: absolute，易触发渲染 bug - 检查是否意外触发了
overscroll-behavior: contain，它会阻止事件冒泡到父级滚动容器
最常被忽略的点：不是 CSS 写得不够多，而是父容器连高度都没有——它看不见，但决定一切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
