局部横向滚动必须用外层容器控制，因table等元素默认不响应overflow-x；需外层div设overflow-x:auto+flex布局，子项flex:0 0 auto，并加-webkit-overflow-scrolling:touch适配ios。
局部横向滚动必须用外层容器控制，不能直接给内容元素（如 table 或 div）加 overflow-x: auto 就完事——90% 的失败案例都卡在这一步。
为什么直接给子元素设 overflow-x: auto 不生效
浏览器对不同元素的溢出行为有默认约束：table 是独立格式化上下文，会无视自身 overflow；div 默认是块级且不产生自然宽度溢出；img 或文本若没显式撑宽，也达不到触发横向滚动的阈值。关键前提是：**内部内容的自然总宽度 > 容器的 clientWidth**。
- 错误写法：
<table style="overflow-x: auto"> —— 完全无效 <li>正确结构：必须用 <code><div class="scroll-wrapper"><table></table></div> - 验证是否溢出：在 DevTools 中选中容器 → 运行
console.log(el.scrollWidth > el.clientWidth)，返回true才可能滚动 - 父容器设：
display: flex、flex-wrap: nowrap、overflow-x: auto、scrollbar-width: none（Firefox）和::-webkit-scrollbar { width: 0 }（Chrome/Safari） - 子项设：
flex: 0 0 auto（禁缩放、禁拉伸、按内容宽），避免用width: 100%或flex: 1 - 移动端必加：
-webkit-overflow-scrolling: touch，否则 iOS Safari 拖不动或卡顿 - 别用
margin-right隔开子项——会导致scroll-snap-align错位；改用gap: 12px（Flex 容器支持） - 外层
div必须设：width: 100%（或具体像素）、overflow-x: auto、-webkit-overflow-scrolling: touch -
table本身设：display: block、min-width: max-content、移除所有width: 100% -
th/td设统一max-width: 160px+overflow: hidden+text-overflow: ellipsis，禁用flex包裹单元格内容 - 固定表头无法纯 CSS 实现：CSS
position: sticky在横向滚动时对left不生效，需 JS 监听外层容器的scrollLeft并同步thead的transform: translateX() - 启用吸附：
scroll-snap-type: x mandatory（容器） +scroll-snap-align: start（子项），注意 Safari 14.5+ 才支持，旧版本自动退化 - 懒加载图片：
IntersectionObserver监听卡片进入可视区，回调中把data-src赋给src；提前加载右侧内容需设rootMargin: "0px 0px 0px 100px" - 别用
scroll事件做懒加载：高频触发、无节流易卡顿，且 IntersectionObserver 在滚动方向变化时更稳定 - 移动端真机测试不可跳过：Safari Web Inspector 查 Timeline 是否频繁触发 Layout，若有，大概率是某处无意调用了
offsetWidth或getBoundingClientRect()
display: flex + overflow-x: auto 是最稳方案
相比 white-space: nowrap + inline-block，Flex 布局语义清晰、对齐可控、不易被意外样式干扰，特别适合卡片、标签页、商品列表等场景。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
表格横向滚动要绕过三个默认行为
表格天生抗拒外部溢出控制，必须主动“拆解”其渲染逻辑，否则滚动条不出现、拖不动、列错位都是常态。
滚动吸附与懒加载不是锦上添花，而是体验底线
用户滑动后卡片卡在中间、图片全量加载导致首屏慢——这两个问题在横向滚动区里高频出现，但解决成本很低。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
