最直接的横向时间线解法是用 overflow-x: auto 配合 display: flex 或 white-space: nowrap，设 overflow-y: hidden、scroll-snap-type: x mandatory 及 scroll-snap-align: start 实现吸附滚动，避免 min-width 破坏响应式，并用 scrollintoview({inline:'center'}) 支持点击跳转。
用 overflow-x: auto 实现基础横向滚动
横向时间线最直接的解法不是靠 JS 滚动库，而是用原生 CSS 控制容器溢出行为。关键在于让时间线容器（比如 <div class="timeline">）允许水平滑动，同时禁止垂直滚动干扰体验。
<p>常见错误是只加 <code>overflow-x: auto 却忘了重置默认样式：父容器可能有 white-space: normal 导致子项换行，或者子项用了 display: block 被强制堆叠。
-
timeline容器需设display: flex或white-space: nowrap配合内联元素，确保子项不折行 - 子项（如每个时间点
<div class="event">）建议设固定宽度或 <code>flex: 0 0 auto，避免弹性拉伸破坏布局 - 必须显式设置
overflow-y: hidden，否则在 macOS 或触控设备上可能出现意外的双轴滚动条 - 加
-webkit-overflow-scrolling: touch可提升 iOS 滚动顺滑度（仅 Safari 有效） - 在时间线容器上设
scroll-snap-type: x mandatory（mandatory表示必须停靠，proximity是松散吸附） - 每个子项加
scroll-snap-align: start，表示以左边缘为吸附基准点 - 若子项有左右 padding/margin，吸附位置会偏移，建议用
box-sizing: border-box统一计算，并把 padding 移到内部元素上 - 慎用
scroll-snap-stop: always，它会让每次滚动只能跳一个子项，丧失自由滑动灵活性 - 时间线容器用
width: 100%+overflow-x: auto，不要设min-width - 子项用
flex: 0 0 fit-content或width: max-content，避免因文字长度差异导致高度塌陷 - 在小屏下可配合媒体查询缩小字体、隐藏次要文案（如用
font-size: clamp(0.75rem, 4vw, 1rem)），而非压缩容器本身 - 测试时重点看 iOS Safari：它对
fit-content支持不稳定，必要时用inline-block+white-space: nowrap替代 - 调用时写成
element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }) -
inline: 'center'是关键，它让元素水平居中显示在可视区内；'start'会靠左对齐，'end'靠右，根据 UI 需求选 - 若目标元素尚未渲染（比如异步加载的时间点），需先
await元素存在，或用MutationObserver监听插入 - 滚动后建议加一次
focus()，方便键盘用户继续操作，同时触发:focus-visible样式做高亮
用 scroll-snap-type 做对齐停靠
纯 overflow-x: auto 滚动后容易停在两个时间点之间，用户需要精准定位某个节点时体验很差。CSS 的 scroll-snap-type 就是为这种场景设计的——它能让容器“吸附”到子项边界。
注意兼容性：Chrome 69+、Firefox 68+、Safari 11.1+ 支持良好，IE 完全不支持；若需兼容旧版，得 fallback 到 JS 监听 scroll 事件手动修正位置。
响应式下避免 min-width 破坏移动端体验
很多人给时间线容器写死 min-width: 1200px 来撑开滚动空间，结果在手机上触发横向滚动的同时，页面主体也被迫横向溢出，出现讨厌的“双滚动条”或内容被裁切。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
真正健壮的做法是让时间线宽度随内容自然伸展，再通过容器约束可视区域 —— 这样既保内容完整性，又不破坏页面流式布局。
用 scrollIntoView() 实现点击跳转高亮
横向时间线常配导航点（如年份标签），点击后要自动滚动到对应节点并视觉强调。别手写 scrollTop 计算，现代浏览器原生 scrollIntoView() 更可靠。
容易踩的坑是默认行为在横向滚动中不生效——因为该方法默认只处理垂直方向，必须显式指定 block 和 inline 对齐方式。
