JavaScript如何判断滚动由鼠标滚轮还是scrollIntoView等程序触发

scroll事件本身没有内置属性区分触发源，最通用稳定的方案是加程序滚动状态锁，拦截滚动监听里的联动逻辑，具体实现步骤如下：

• 首先在作用域内声明状态标记：

// 标记是否为代码主动触发的滚动
let isProgramScroll = false;

• 修改目录点击触发滚动的逻辑：调用scrollIntoView前先把标记置为true，同时直接手动把当前点击的目录项设为激活态，不用等滚动回调处理；等滚动完全结束后再把标记改回false。

// 目录项点击事件逻辑
tocItem.addEventListener('click', (e) => {
  e.preventDefault();
  const target = document.querySelector(e.target.hash);
  // 开启程序滚动标记
  isProgramScroll = true;
  // 点击时直接设置激活态，避免滚动过程中目录状态跳变
  setActiveToc(e.target);
  // 触发滚动
  target.scrollIntoView({ behavior: 'smooth', block: 'start' });

  // 滚动结束后解锁，优先用标准scrollend事件，精度远高于固定延时
  const unlock = () => {
    isProgramScroll = false;
    contentArea.removeEventListener('scrollend', unlock);
  };
  contentArea.addEventListener('scrollend', unlock, { once: true });
  // 兼容低版本浏览器的兜底逻辑
  setTimeout(unlock, 600);
});

• 修改正文区域的滚动监听逻辑：检测到是程序触发的滚动时，直接跳过目录激活的计算逻辑，避免联动冲突。

contentArea.addEventListener('scroll', () => {
  // 程序触发的滚动不做自动联动处理
  if (isProgramScroll) return;
  // 原有逻辑：计算当前视口内最靠前的标题，设置对应目录项为激活态
  const currentHeading = calcCurrentVisibleHeading();
  setActiveToc(currentHeading);
}, { passive: true });

注意事项 #

不要单独依赖固定时长的setTimeout做解锁逻辑，不同设备、浏览器下平滑滚动的时长存在差异，优先使用scrollend事件，该事件会在滚动动画完全停止、无待执行滚动任务时触发，兼容性覆盖绝大多数现代浏览器。

如果需要更严谨的判断，可以在点击目录时额外记录目标标题的ID，滚动监听中如果当前命中的标题和记录的目标ID一致，也直接跳过处理，进一步避免极端场景下锁状态异常导致的bug。

效果示意图

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