移动端横向滚动抽屉需用 position: fixed 容器+独立 flex 滚动区，禁用 transform 与 overflow 同元素混用，子项设 flex-shrink: 0 和 min-width，加 touch-action: pan-y 防手势冲突。
移动端横向滚动抽屉（比如从右向左滑出的筛选面板、商品属性栏）不能靠 overflow-x: auto 一贴了事——真机上大概率卡顿、点不中首尾、滚动后回弹错位。核心矛盾是：既要「可滚动」，又要「抽屉式位移」，还得「不干扰主内容流」。
为什么 overflow-x: auto + flex 在抽屉里容易失效
很多人把抽屉容器设为 display: flex，子项用 flex-shrink: 0，再加 overflow-x: auto，结果在 iOS Safari 上滑不动，或安卓 WebView 滚到一半就停。根本原因是：
- 抽屉本身用了
transform: translateX()动画，而transform会创建新的层叠上下文和合成层，若同时对父容器设overflow，部分 WebView 会忽略其滚动能力 -
flex-wrap: nowrap没显式声明，DOM 更新后可能自动换行，导致overflow-x失效 - 容器宽度没撑满（比如父级是
inline或未设width），overflow-x根本不触发
抽屉容器必须用 position: fixed，且 overflow-y: hidden
横向滚动抽屉本质是「脱离文档流的独立滚动区域」，不是主内容的一部分。所以不能让它参与 flex/grid 布局流，否则位移和滚动会互相干扰。
- 抽屉容器必须设
position: fixed（或absolute），top: 0、right: 0、height: 100vh - 给它加
overflow-y: hidden—— 不是为了隐藏纵向溢出，而是防止 flex 容器因子项高度不一致意外撑高，破坏overflow-x的判定逻辑 - 内部滚动区另起一层：
<div class="drawer-scroll">，再给它设 <code>display: flex、overflow-x: auto、-webkit-overflow-scrolling: touch - 别在
.drawer-scroll上写transform或will-change，这些会干扰滚动合成层 - 子项统一加
flex-shrink: 0（等价于flex: none），禁止浏览器自动压缩 - 每个子项设明确
min-width（如min-width: 120px），防止单项内容过短导致整体宽度不足、无法触发滚动 - 容器必须显式设
width: 100%或max-width: 100vw，不能依赖fit-content或auto - 首尾留白：
padding-inline: 16px，解决手指贴边滑过点不中的问题 - 抽屉打开时，给
body加touch-action: pan-y，禁用横向拖拽，避免和内部滚动冲突 -
scroll-behavior: smooth只加在需要 JS 主动滚动的场景（如scrollIntoView），不要全局设在html或body - iOS 15+ 可省略
-webkit-overflow-scrolling: touch，但保留更稳；Android 必须加，否则惯性滚动几乎不存在 - 滚动区高度必须固定（如
height: 48px），不能用min-height或auto，否则部分低端机渲染异常
横向滚动区的 flex 子项必须严格控制收缩与尺寸
横向滚动条“能动”的前提是子项不被压缩、不换行、不塌陷。任何一项漏掉，都会让 overflow-x 形同虚设。
立即学习“前端免费学习笔记（深入）”；
移动端手势冲突和 scroll-behavior 的坑
用户右滑关闭抽屉时，如果横向滚动区正在惯性滑动，两者手势会打架；另外，scroll-behavior: smooth 在某些 Android WebView 下会导致滚动卡顿甚至白屏。
最易被忽略的一点：抽屉容器的 transform: translateX() 和内部滚动区的 overflow-x 是两套独立机制，不能混写在同一个元素上。位移归位移，滚动归滚动——强行合并，就是真机上各种“看起来没问题，一测就崩”的根源。
