position: sticky 的 top/bottom 仅在垂直滚动中生效，水平滚动需用 left/right；父容器不能有 overflow-x: hidden，flex/grid 父元素需设 align-items: start 和明确宽度，iOS Safari 与微信小程序对 left/right sticky 支持差。
sticky在水平滚动容器里不响应top/bottom，只认overflow-y
position: sticky 的 top 和 bottom 值只在垂直滚动上下文中生效，哪怕你把容器设成 overflow-x: auto 并横向滚动，top: 0 依然不会触发粘性行为——浏览器根本不会为横向滚动建立 sticky 的“垂直锚定”逻辑。
常见错误现象：给一个宽容器加了 overflow-x: auto，里面放多个 inline-block 元素，再给第一个加 position: sticky; top: 0;，结果它随内容一起横移，完全不吸顶。
- sticky 的
top/bottom只绑定垂直滚动；left/right才绑定水平滚动 - 若想让元素在水平滚动时“吸左”，必须用
left: 0，且父容器需满足 sticky 所有其他条件（高度、无 overflow: hidden、非 transform 包含块等） -
overflow-x: auto本身不构成 sticky 的有效滚动上下文，除非同时存在垂直溢出并触发了overflow-y滚动
overflow-x: hidden 直接杀死 sticky 的水平粘性能力
如果你试图用 left: 0 实现水平方向的粘性（比如表格首列冻结），但父容器设置了 overflow-x: hidden，sticky 会立即退化为 static。这和 vertical 场景下 overflow: hidden 的破坏机制一致：它切断了 sticky 元素向上查找“可滚动祖先”的链路。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查所有祖先节点，逐级确认是否写了
overflow-x: hidden（包括内联样式、CSS-in-JS 注入） - 若必须裁剪横向溢出，改用
clip-path: inset(0)—— 它不创建新层叠上下文，也不干扰 sticky - 微信小程序中，
scroll-view组件默认带overflow-x: auto，但它的内部滚动容器对left粘性支持极差，iOS 下尤其不稳定
flex/grid 容器中 left/right sticky 失效的隐藏条件
即使你写了 position: sticky; left: 0;，在 display: flex 或 display: grid 的父容器里，它也可能静默失效。原因不是 flex 本身不支持，而是这类容器默认不触发 BFC，且常配合 align-items: stretch 或基线对齐，导致浏览器无法准确判断 sticky 元素的“进入视口”时机。
关键修复点：
- 给 flex/grid 父容器显式加
align-items: start（避免基线拉伸干扰布局边界） - 确保该容器有明确的
width或min-width，否则 sticky 元素可能因父宽为 0 而失去活动范围 - 避免父容器设
overflow: hidden或transform—— 这两者都会创建新包含块，使left相对于该容器而非滚动根计算
iOS Safari 和微信小程序对 left/right sticky 的兼容性断层
截至 2026 年 4 月，iOS Safari（尤其是 iOS 15.4 之前版本）对 left 和 right 的 sticky 支持仍属实验性：滚动卡顿、阈值偏移、甚至整个 sticky 元素渲染为 display: none。微信小程序基础库在 2.28.0 之前几乎完全忽略 left 类 sticky 行为。
临时绕过方案：
- 用
position: -webkit-sticky+left: 0强制启用 WebKit 专属支持（仅限 Safari） - 在小程序中，改用
scroll-view的scroll-left+ 动态style控制首列transform: translateX(...)模拟吸左 - 服务端或构建时注入降级 CSS：对 iOS UA 添加
@supports not (position: sticky) { ... }回退为 JS 监听 scroll 事件手动定位
真正容易被忽略的是：水平 sticky 的“活动窗口”高度必须大于元素自身高度，否则即使所有样式都正确，它也会在滚动开始瞬间就脱离粘性范围——这点和 vertical sticky 对父容器高度的要求完全对称，但开发者极少检查。
