scrollLeft 实现局部横向滚动需设 overflow-x: auto、禁用 scroll-behavior: smooth，推荐 scrollTo() 方法；图片单行靠 flex/white-space: nowrap；对齐靠 scrollend + 四舍五入计算；移动端必配 touch-action: pan-y。
用 scrollLeft 实现局部横向滚动最直接
HTML 原生支持容器内图片横向滚动，不需要 JS 动画或 transform 位移模拟。关键就是给容器设 overflow-x: auto，再用 scrollLeft 控制位置。它天然支持鼠标滚轮、触摸板惯性滚动、键盘方向键（需加 tabindex），也兼容移动端 touch 操作。
常见错误是只写 overflow: auto 而漏掉 x，导致纵向也溢出；或者没设 white-space: nowrap 或 display: flex，让图片自动换行，滚动失效。
- 容器必须设
overflow-x: auto且overflow-y: hidden - 内部图片需强制单行排列：用
display: flex或white-space: nowrap+img { display: inline-block } - 禁用
scroll-behavior: smooth（尤其在按钮控制时），否则scrollLeft赋值会被平滑动画干扰 - 移动端要加
touch-action: pan-y，防止浏览器抢走横向手势
scrollTo({ left, behavior }) 比直接改 scrollLeft 更稳妥
直接赋值 element.scrollLeft = 200 在 Safari 和部分安卓 WebView 中可能触发回弹或不响应。推荐用 scrollTo() 方法，它支持 behavior: 'smooth'，且可被取消（cancelable），逻辑更可控。
注意：目标位置不是“第几张图 × 宽度”，而是元素真实可视宽度——必须用 el.getBoundingClientRect().width 获取，不能依赖 CSS 设置的 width，因为 padding/border/box-sizing 会影响实际尺寸。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 每次滚动前先调用
el.scrollTo({ left: 0, behavior: 'auto' })清除残留动画状态 - 计算目标位置时，用
el.scrollLeft += targetEl.getBoundingClientRect().width，比硬编码像素值更健壮 - 如果容器有左右内边距（
padding），记得从getBoundingClientRect().width中减去，否则会偏移
左右按钮点击后“对齐一张图”怎么实现？
用户点一次按钮，期望看到一张完整图片居中或左对齐，而不是停在两张图中间。这需要主动计算并滚动到最近的“对齐点”，不能依赖自然滚动惯性。
核心思路是：监听 scroll 事件，取当前 scrollLeft，除以单张图宽度后四舍五入，再乘回去。但要注意防抖——频繁触发会导致卡顿，建议用 requestAnimationFrame 节流。
- 别在
scroll回调里立刻调scrollTo()，会引发递归滚动，加个isScrolling标志位拦截 - 对齐逻辑只在用户松手后（
scrollend事件）执行，现代浏览器已支持该事件，降级可用setTimeout+ 检测scrollLeft是否稳定 - 每张图宽度必须一致，否则对齐点无法统一计算；可用
img { flex: 0 0 auto; width: 100%; }配合父容器flex控制
移动端 touch 滑动为什么点不动？
在手机上点一次没反应，或要连点两次才生效，根本原因不是 JS 写错，而是 touch 事件被浏览器默认行为拦截了：比如缩放、长按呼出菜单、或内部链接抢焦点。
解决方案不是加一堆 event.preventDefault()，而是精准控制手势接管权。重点在 CSS 层：touch-action 属性比 JS 事件监听更底层、更可靠。
- 给滚动容器加
touch-action: pan-y：允许用户纵向滚动页面，但把横向交给 JS 处理 - 若容器内无链接/表单，可设
touch-action: none，完全接管所有 touch 行为 - 不要只监听
touchend：手指抬起瞬间位置不稳定，应在touchstart记起点，touchend算位移差，>50px 才视为有效滑动 - 避免在
touchstart里无条件调preventDefault()，否则会禁用所有默认交互（如点击跳转）
