overflow-x: auto + display: flex 是最轻量、兼容性最好、无需 JS 的横向滚动方案；它天然支持触屏惯性、键盘导航等，配合 scroll-snap-type 可实现卡片对齐停靠，再结合 IntersectionObserver 实现懒加载与曝光统计。
用 overflow-x: auto + display: flex 是最轻量、兼容性最好、无需 JS 就能跑通的方案。别一上来就写轮播逻辑，90% 的“横向轮播”需求其实只是「可滑动的卡片列表」，CSS 原生滚动就能解决。
为什么 overflow-x: auto 比 JS 轮播更合适
局部横向滚动本质是「用户主动拖/滑，内容随动」，不是「自动播放+定时切换」。用 JS 控制 transform 或 scrollLeft 会引入额外状态管理、触摸事件兼容、惯性衰减模拟等问题，而原生滚动天然支持：触屏惯性、键盘方向键、滚轮、辅助技术聚焦。关键前提是容器必须真正可滚动——即子项总宽度 > 容器宽度。
- 只加
overflow: auto会触发双向滚动，必须显式设overflow-y: hidden - 子项若用
flex布局但没禁用收缩（flex-shrink: 0），小屏下会被压缩变形 - 移动端 iOS Safari 必须加
-webkit-overflow-scrolling: touch，否则滑动卡顿 - 隐藏滚动条不能删掉
overflow-x: auto，否则滚动能力直接消失
scroll-snap-type 实现卡片对齐停靠
用户松手后卡片卡在中间，是横向滚动体验差的核心原因。scroll-snap-type 能让每次滚动自然吸附到卡片边缘，比 JS 模拟更稳定、更省资源。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 容器必须设
scroll-snap-type: x mandatory，且overflow-x用scroll（不是auto），部分浏览器才识别 snap - 每个卡片设
scroll-snap-align: start（左对齐）或center（居中对齐），别用margin-right隔开——它会参与对齐计算导致偏移；改用gap（flex 容器）或padding-inline-end -
scroll-snap-stop: always可防止快速滑动跳过多个卡片，但 Safari iOS 14.5 以下不支持 - 真机测试不可少，DevTools 里看到样式生效 ≠ 实际吸附成功
IntersectionObserver 做懒加载和曝光统计
横向滚动区里的图片、商品数据，不该一加载页面就全请求。用 IntersectionObserver 监听卡片是否进入可视区，比监听 scroll 事件更高效、更抗抖动。
- 初始化时传
{ root: null, threshold: 0.1 }，root: null表示以视口为根 - 横向滚动需扩展检测范围，比如
rootMargin: "0px 0px 0px 100px"提前加载右侧即将出现的卡片 - 回调里替换
data-src到src加载图片，别直接调用 API 上报曝光——高频滚动易重复触发，建议加once: true或节流 - 每个卡片单独调用
observer.observe(cardElement)，别用一个 observer 观察整个容器
真正容易被忽略的是：所有这些 CSS 行为都依赖「容器尺寸可控 + 子项不换行 + 内容真实溢出」三个硬条件。任何一项没满足，overflow-x、scroll-snap、IntersectionObserver 都会静默失效——不是报错，而是什么也不做。调试时优先检查容器 computed width / height 和子项总宽度，而不是翻 JS 逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
