移动端scrollIntoView平滑滚动被随机点击/滚动中断的解决方案咨询

这个坑我之前做移动端交互时踩过好几次！移动端浏览器的触摸事件优先级特别高，单纯阻止touchmove往往不够——浏览器的默认滚动/触摸行为可能在更早的阶段就介入了。下面给你几个亲测有效的方案：

方案一：滚动期间临时锁定触摸交互 #

核心思路是在触发平滑滚动时，给目标容器添加“锁定状态”，拦截所有可能干扰滚动的触摸事件，直到滚动完成再解锁。

具体实现步骤 #

1. 用一个变量标记是否正在执行平滑滚动
2. 触发滚动前，给容器绑定touchstart/touchmove/touchend事件，拦截所有触摸行为
3. 滚动结束后，解绑事件并取消锁定状态

代码示例 #

let isScrolling = false;

function scrollToTarget(targetEl) {
  isScrolling = true;
  const container = document.querySelector('.your-container');

  // 定义触摸拦截函数
  const blockTouchEvents = (e) => {
    if (isScrolling) {
      e.preventDefault();
      e.stopPropagation();
    }
  };

  // 绑定事件，必须设置passive: false才能生效preventDefault
  container.addEventListener('touchstart', blockTouchEvents, { passive: false });
  container.addEventListener('touchmove', blockTouchEvents, { passive: false });
  container.addEventListener('touchend', blockTouchEvents, { passive: false });

  // 执行原生平滑滚动
  targetEl.scrollIntoView({
    behavior: 'smooth',
    block: 'start',
    inline: 'nearest'
  });

  // 监听滚动结束，解锁触摸
  const checkScrollComplete = () => {
    if (!isScrolling) return;
    const targetOffset = targetEl.offsetTop - container.offsetTop;
    // 判断是否滚动到目标位置（允许微小误差）
    const isReached = Math.abs(container.scrollTop - targetOffset) < 2;
    
    if (isReached) {
      isScrolling = false;
      container.removeEventListener('touchstart', blockTouchEvents);
      container.removeEventListener('touchmove', blockTouchEvents);
      container.removeEventListener('touchend', blockTouchEvents);
      cancelAnimationFrame(checkScrollComplete);
    } else {
      requestAnimationFrame(checkScrollComplete);
    }
  };
  requestAnimationFrame(checkScrollComplete);
}

方案二：用自定义平滑滚动替代原生API #

原生scrollIntoView的平滑滚动逻辑是浏览器内部实现的，很难完全控制。自己实现平滑滚动函数，能100%掌控整个过程，彻底避免被外部事件中断。

代码示例 #

function smoothScrollTo(container, targetEl) {
  const targetPosition = targetEl.offsetTop - container.offsetTop;
  const startPosition = container.scrollTop;
  const distance = targetPosition - startPosition;
  const duration = 600; // 自定义滚动时长
  let startTime = null;

  // 临时锁定触摸事件
  const blockTouch = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };
  container.addEventListener('touchstart', blockTouch, { passive: false });
  container.addEventListener('touchmove', blockTouch, { passive: false });

  // 缓动函数，让滚动更自然
  const easeInOutCubic = (t, b, c, d) => {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t * t + b;
    t -= 2;
    return c / 2 * (t * t * t + 2) + b;
  };

  // 自定义滚动动画
  const scrollAnimation = (timestamp) => {
    if (!startTime) startTime = timestamp;
    const progress = timestamp - startTime;
    container.scrollTop = easeInOutCubic(progress, startPosition, distance, duration);

    if (progress < duration) {
      requestAnimationFrame(scrollAnimation);
    } else {
      // 滚动结束，解锁触摸
      container.removeEventListener('touchstart', blockTouch);
      container.removeEventListener('touchmove', blockTouch);
    }
  };

  requestAnimationFrame(scrollAnimation);
}

调用时直接传入容器和目标元素即可：smoothScrollTo(document.querySelector('.your-container'), document.querySelector('.target-element'))

额外注意事项 #

• 不要全局阻止touchmove，否则会影响页面其他正常交互（比如下拉刷新、其他可滚动区域），只在滚动期间针对性拦截
• 真机测试时要覆盖主流移动端浏览器（Safari、Chrome、微信内置浏览器），它们的触摸事件处理逻辑有细微差异
• 如果容器嵌套在其他滚动元素中，记得同时锁定父元素的滚动行为，避免父元素滚动干扰

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