scrollBy/scrollTo实现轮播时与浏览器滚动冲突问题咨询

这是浏览器原生滚动机制的固有特性，不属于代码bug。

浏览器同一滚动上下文内，同一时间只能执行一个平滑滚动任务，后触发的滚动操作会直接中断尚未执行完成的前序滚动任务，不存在两个平滑滚动并行执行的可能。
无论是用户点击锚点触发的垂直平滑滚动，还是轮播组件通过scrollBy/scrollTo触发的滚动，只要绑定在同一个滚动容器上，就会互相抢占执行权，直接表现就是锚点跳转滚动到中途被打断。

• 当前轮播实现直接将scroll-behavior: smooth、scroll-snap属性绑定在页面根滚动容器上，轮播横向滚动和页面垂直滚动共享同一个滚动上下文
• 轮播触发的滚动操作优先级会覆盖正在执行的锚点垂直滚动，导致跳转中断

按改造成本、体验优先级排序：

方案1：为轮播创建独立滚动上下文（最推荐） #

• 给轮播组件外层容器单独设置固定尺寸，添加overflow-x: auto; overflow-y: hidden属性，将scroll-behavior: smooth、scroll-snap相关配置全部迁移到轮播自身容器上，不要挂载在页面根节点
• 轮播逻辑中调用的scrollBy/scrollTo方法，全部指向轮播自身容器元素，不再操作页面根滚动对象
• 该方案下轮播横向滚动和页面垂直滚动完全隔离，两者的平滑滚动任务互不干扰，锚点跳转、用户手动滚动页面的原生行为完全不受影响，同时保留原方案的渐进增强优势：JS加载失败时用户仍可手动滑动浏览轮播内容。

方案2：添加滚动行为互斥锁（适合不想调整现有DOM结构的场景） #

• 拦截所有锚点点击事件，同时监听页面垂直滚动行为，当检测到用户触发锚点跳转、或正在手动垂直滚动页面时，立刻暂停轮播自动滚动逻辑，在滚动停止（可通过滚动位置防抖、判断是否抵达目标锚点位置判定）前，不执行任何轮播触发的滚动操作
• 增加轮播可见性判断：当轮播区域滚动出视口范围时，直接暂停轮播所有滚动触发逻辑，轮播回到视口内再恢复运行
• 注意滚动事件监听需加节流，避免高频触发造成性能问题。

方案3：手动拆分控制滚动逻辑（改造成本最高，不优先推荐） #

• 移除页面根节点的scroll-behavior: smooth属性，锚点跳转的平滑滚动、轮播的滚动动画均通过requestAnimationFrame手动实现，自行维护两个方向的滚动进度，从逻辑层避免滚动任务冲突
• 该方案会丢失原生CSS滚动的渐进增强能力，兼容成本更高。

• 不建议通过滚动过程中频繁触发scrollTo、修改DOM位置的方式实现循环效果，这类操作即使在独立滚动上下文下，也容易在用户交互时造成卡顿、跳变
• 推荐使用首尾克隆占位方案实现循环：在轮播列表头部插入最后一帧的克隆节点、尾部插入第一帧的克隆节点，滚动到克隆节点时无动画瞬切到对应真实节点位置，用户无感知，也不会打断正常滚动流。

内容的提问来源于stack exchange，提问作者Rych