Outlook 2013/2016 Web Add-in按钮点击后自动滚动至顶部问题求助

核心原因定位 #

问题明确指向Outlook 2013/2016搭载的IE11内核兼容性缺陷，这类异常通常和事件处理逻辑、MUI组件的IE11适配漏洞、Office.js交互冲突相关。

具体修复方案 #

• 显式阻止按钮默认行为
  IE11对按钮的默认行为解析存在特殊性，若按钮处于<form>标签内或存在隐性表单提交逻辑，会触发页面跳转。在点击事件中强制阻止默认行为和事件冒泡：

  const handleButtonClick = (e) => {
    e.preventDefault();
    e.stopPropagation();
    // 业务逻辑代码
  };
  
  <Button onClick={handleButtonClick}>操作按钮</Button>
  

• 替换带href的MUI Button为ButtonBase
  若使用了href="#"这类属性的MUI Button，IE11会将其解析为锚点跳转。移除href属性，或改用ButtonBase实现自定义按钮，规避默认锚点行为：

  import ButtonBase from '@mui/material/ButtonBase';
  
  <ButtonBase onClick={handleButtonClick}>
    {/* 按钮内容 */}
  </ButtonBase>
  

• 绕过React合成事件，直接绑定DOM事件
  React在IE11中的事件委托机制可能和MUI组件产生冲突。通过ref直接绑定原生DOM事件：

  const buttonRef = useRef(null);
  
  useEffect(() => {
    if (buttonRef.current) {
      buttonRef.current.addEventListener('click', (e) => {
        e.preventDefault();
        // 业务逻辑代码
      });
    }
  }, []);
  
  <Button ref={buttonRef}>操作按钮</Button>
  

• 添加IE11专属CSS修复
  MUI组件部分样式在IE11中可能引发布局异常，间接触发滚动。针对IE11添加样式重置：

  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .MuiButton-root {
      overflow: visible;
    }
    /* 其他可能引发滚动的组件样式调整 */
  }
  

• 隔离Office.js API调用与页面事件
  Office.js的API调用可能和页面滚动存在隐性冲突。在按钮点击后延迟执行Office相关逻辑：

  const handleButtonClick = async (e) => {
    e.preventDefault();
    setTimeout(async () => {
      // Office.js API调用逻辑
      await Office.context.mailbox.item.body.getAsync(...);
    }, 0);
  };
  

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