ios safari 中 sticky 在局部滚动容器失效，是因为祖先元素的 overflow: auto/hidden 静默禁用其滚动上下文；需确保 sticky 锚定在真正可滚动的容器上，并检查 flex/grid 父容器是否满足主轴、高度及 bfc 要求。
为什么 iOS Safari 里 sticky 在局部滚动容器里完全不工作
不是写法错，是 sticky 被祖先的 overflow: auto 或 overflow: hidden 静默禁用了——iOS Safari 要求 sticky 必须锚定在“真正可滚动”的容器上，而很多局部滚动容器（比如弹窗里的 scroll-view、卡片内 div）只是声明了 overflow: auto，但内容没撑高、实际不可滚动，浏览器就直接把它当普通块处理，position: sticky 退化为 static。
- 用 DevTools 选中 sticky 元素，逐级往上点 parent，看每一层的
Computed→overflow值，重点盯overflow: hidden、auto、scroll - 临时给某一层加
overflow: visible !important，如果 sticky 立刻恢复，问题就定位准了 - 别只查直接父级：微信小程序的
scroll-view、Ant Design 的.ant-modal-body、Swiper 的壳，都可能悄悄加了overflow: hidden
如何让 sticky 在 flex/grid 父容器里正常吸附
flex 或 grid 容器本身不自动产生滚动上下文，Safari 对“可滚动区域”的判断更苛刻：它需要明确主轴方向 + 可滚动空间 + 稳定基线参考。缺一不可，否则 sticky 就卡住不动或闪一下消失。
- 给 flex 父容器加
flex-direction: column+overflow-y: auto（不是overflow: auto） - 显式设
height或max-height，比如max-height: 500px，不能只靠min-height: 100vh - 加
align-items: flex-start，避免align-items: stretch或baseline干扰“进入视口”的判定 - 绝对别用
display: inline-flex或inline-grid——inline 级容器不创建 BFC，sticky 直接失效
必须保留 overflow 时怎么绕过限制
有些 UI 框架或设计规范强制要求 overflow: hidden（比如裁剪圆角图片、防止动画穿帮），删掉会破样式。这时不能硬改，得换锚点。
- 用
clip-path: inset(0)替代overflow: hidden：视觉效果一致，但不切断滚动上下文，对 sticky 无干扰 - 把 sticky 元素提一层：在带
overflow: auto的容器外再套一个position: relative的 wrapper，把 sticky 元素挂进去 - 慎用
transform、filter、will-change——它们会创建新层叠上下文，让 sticky 参考系变成变换后的容器，而不是视口
滚动到底部 sticky 突然消失，不是 bug 是边界行为
iOS 上尤其明显：sticky 只在“滚动范围内”生效。当内容太短，或 sticky 元素自身高度 + 距离底部距离小于 top 值时，它会在到达边界时停止吸附，看起来像“卡住”或“消失”。橡皮筋滚动还会放大这个现象。
- 检查 sticky 元素的
top值是否过大（比如top: 200px），而下方内容撑不开足够空间 - 确保包含块高度足够：把
height: 100vh改成min-height: 100vh，允许随内容扩展 - 如果用 JS 做降级（比如 IntersectionObserver），注意不要只监听
window.scrollY——移动端 scroll 事件常被节流，要用getBoundingClientRect().top判断是否即将滚出视口顶部
overflow: hidden。动手前先开 DevTools，从 sticky 元素往上翻，比反复调 CSS 更快。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
