如何用JavaScript终止Microsoft Edge中的原生平滑滚动？

可行方案 #

• 立即中断当前滚动动画
  使用window.scrollTo()显式跳转到当前位置，并指定behavior: 'auto'，这会强制浏览器终止正在进行的原生平滑滚动：

  window.scrollTo({
    top: window.scrollY,
    left: window.scrollX,
    behavior: 'auto'
  });
  

  原理是：Edge的原生平滑滚动会被显式的非平滑滚动指令中断，这个操作不会改变页面位置，但会终止滚动动画。

• 临时禁用原生平滑滚动（适合自定义动画场景）
  如果需要确保后续不会再触发原生平滑滚动干扰你的动画，可以临时修改全局滚动行为：

  // 禁用原生平滑滚动
  document.documentElement.style.scrollBehavior = 'auto';
  document.body.style.scrollBehavior = 'auto';
  
  // 执行你的自定义点击动画
  // 示例：假设你的动画函数是customClickAnimation()
  customClickAnimation();
  
  // 动画完成后恢复原生平滑滚动（可选，根据需求决定）
  setTimeout(() => {
    document.documentElement.style.scrollBehavior = '';
    document.body.style.scrollBehavior = '';
  }, 800); // 时间匹配你的动画时长
  

为什么window.scrollY = window.scrollY无效 #

直接赋值window.scrollY只是读取并设置当前滚动位置的数值，并没有触发浏览器的滚动行为，因此无法中断正在进行的原生平滑滚动动画。

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