scrollBy()需配合scroll-behavior: smooth才有动画，比scrollLeft+=更可靠因其适配缩放与subpixel渲染；停准需自行计算偏移、节流scroll事件并加防抖flag。
直接用 scrollBy() 最省事，但必须配 scroll-behavior: smooth 才有动画；不设这个，点击按钮就“瞬移”，体验断层。
scrollBy() 为什么比 scrollLeft += 更靠谱？
scrollBy() 是相对滚动，天然适配缩放、高 DPI 屏幕和 subpixel 渲染；而手动改 scrollLeft 容易因小数精度导致停不准，尤其在 Safari 或缩放为 110% 的 Windows 上。
- 用
scrollBy({ left: 100, behavior: 'smooth' })，浏览器自动处理插值和缓动 - 避免写
el.scrollLeft += 100—— 这种写法在 iOS Safari 下常卡顿，且无法响应scroll-behavior - 如果目标是“每次滚动一屏”，别硬算像素，改用
el.scrollBy({ left: el.clientWidth, behavior: 'smooth' })
按钮点击后没反应？先查这三件事
常见静默失败不是代码错，而是 CSS 或 DOM 状态拦住了滚动。
-
overflow-x: hidden写在了父容器上，但实际要滚动的是子元素 —— 必须确保目标元素（如.scroll-content）本身有overflow-x: auto或scroll - 目标元素没有设置
white-space: nowrap（对 inline 内容）或display: inline-flex（对 flex 项目），导致内容换行、scrollWidth小于clientWidth - 按钮绑了
onclick，但 JS 拿到的元素是null—— 检查是否 DOM 加载完再执行，或用document.addEventListener('DOMContentLoaded', ...)
怎么让按钮只在可滚动时才显示？
靠 scrollWidth > clientWidth 判断，但别在每次点击都重新查 —— 首次渲染后缓存一次就行。
立即学习“前端免费学习笔记（深入）”；
- 初始化时运行：
const el = document.querySelector('.scroll-content'); const canScroll = el.scrollWidth > el.clientWidth; - 用
canScroll控制按钮的display或visibility，避免布局抖动 - 不要监听
resize动态重判 —— 字体加载、图片懒加载都可能改变宽度，真需要响应式，用ResizeObserver替代
移动端拖拽 + 按钮共存，touch 事件怎么不打架？
按钮点击和 touch 拖拽本质冲突：手指点下去，既可能是 click，也可能是 drag start。关键在事件拦截时机。
- 给按钮加
touch-action: manipulation，让浏览器知道“这个区域只响应点击” - 滚动容器加
touch-action: pan-y（禁用横向原生滚动），否则 iOS 会抢走touchmove - 拖拽中
e.preventDefault()必须在touchmove里调，且不能延迟 —— 放在异步回调里就失效 - 按钮点击回调里，加个
if ('ontouchstart' in window) e.preventDefault()，防 iOS 双触发
真正麻烦的不是滚动本身，而是滚动结束后的对齐 —— scrollBy 不保证停在整屏位置，要停准得自己算偏移、节流 scroll 事件、加防抖 flag，这些细节漏一个，用户就感觉“卡了一下”。
