原生JS如何强制终止触摸滚动，使scrollIntoView不受用户滚动干扰？

针对你遇到的移动端滑动关闭查看器后，用户持续触摸导致scrollIntoView被浏览器阻止的问题，可通过以下几种方式解决：

方案1：等待用户触摸结束后再触发滚动 #

浏览器在用户处于触摸状态时会优先响应原生触摸滚动，因此可以监听touchend事件，确保只有在用户松开手指后才执行滚动逻辑。

修改示例代码如下：

// 标记是否允许执行滚动
let allowScroll = true;

// 监听触摸开始事件，暂时禁止滚动
document.addEventListener('touchstart', () => {
  allowScroll = false;
});

// 监听触摸结束事件，恢复滚动权限
document.addEventListener('touchend', () => {
  allowScroll = true;
  // 触摸结束后立即尝试滚动（如果是关闭查看器的场景，可在此处触发）
  scrollToTarget();
});

function scrollToTarget() {
  if (!allowScroll) return;
  document.getElementById("target").scrollIntoView({
    behavior: "smooth",
    inline: "center"
  });
  document.getElementById("indicator").innerHTML = "Scrolling...";
  setTimeout(() => {
    document.getElementById("indicator").innerHTML = "";
  }, 500);
}

// 原定时逻辑保留，仅在允许时执行
setInterval(() => {
  scrollToTarget();
}, 2000);

方案2：临时禁用浏览器原生触摸滚动 #

在关闭查看器并触发滚动的时间段内，临时阻止浏览器的默认触摸滚动行为，滚动完成后再恢复：

function scrollToTarget() {
  // 阻止触摸时的默认滚动行为
  const preventDefault = (e) => e.preventDefault();
  document.addEventListener('touchmove', preventDefault, { passive: false });

  document.getElementById("target").scrollIntoView({
    behavior: "smooth",
    inline: "center"
  });
  
  document.getElementById("indicator").innerHTML = "Scrolling...";
  setTimeout(() => {
    document.getElementById("indicator").innerHTML = "";
    // 滚动完成后恢复默认行为
    document.removeEventListener('touchmove', preventDefault);
  }, 500);
}

setInterval(() => {
  scrollToTarget();
}, 2000);

注意：passive: false是必须的，否则无法阻止touchmove的默认行为，部分浏览器会有兼容性提示，需测试适配。

方案3：使用自定义滚动动画替代scrollIntoView #

原生scrollIntoView的平滑滚动容易被用户交互打断，用requestAnimationFrame实现自定义滚动逻辑，可强制完成滚动：

function smoothScrollTo(element) {
  const targetTop = element.getBoundingClientRect().top + window.pageYOffset;
  const startTop = window.pageYOffset;
  const distance = targetTop - startTop;
  const duration = 500;
  let startTime = null;

  function animation(currentTime) {
    if (!startTime) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const progress = Math.min(timeElapsed / duration, 1);
    // 使用缓动函数让滚动更自然
    const ease = progress < 0.5 
      ? 2 * progress * progress 
      : 1 - Math.pow(-2 * progress + 2, 2) / 2;
    window.scrollTo(0, startTop + distance * ease);
    
    if (timeElapsed < duration) {
      requestAnimationFrame(animation);
    } else {
      document.getElementById("indicator").innerHTML = "";
    }
  }

  document.getElementById("indicator").innerHTML = "Scrolling...";
  requestAnimationFrame(animation);
}

setInterval(() => {
  smoothScrollTo(document.getElementById("target"));
}, 2000);

针对你的业务场景优化 #

在关闭图片查看器时，不要立即触发滚动，而是绑定到touchend事件上，确保用户已经结束触摸操作后再执行滚动，这样就能避免浏览器阻止脚本滚动的问题。

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