使用React和FluentUI开发Microsoft Teams应用：模态框自动滚动至按钮问题排查

这种自动滚动的情况，主要是以下几个原因导致的：

• FluentUI Modal的默认聚焦逻辑：FluentUI的模态框组件默认会在打开时自动聚焦到第一个可交互元素（比如触发模态框的按钮、模态框内的操作按钮），浏览器为了让聚焦元素处于可视区域，会自动滚动到该位置。
• Teams容器的滚动特性：Teams的内嵌网页容器有自己的滚动处理机制，当页面内元素触发聚焦时，容器会自动调整滚动位置，确保聚焦元素可见。
• 模态框挂载位置问题：如果模态框不是挂载在body节点下，而是嵌套在某个带滚动条的父容器里，聚焦元素时父容器会自动滚动到该元素所在区域。

对应的解决办法可以尝试这些：

• 禁用自动聚焦：给FluentUI的Modal组件添加preventFocusOnMount={true}属性，阻止默认的聚焦行为，就能避免触发滚动。
• 自定义聚焦目标：如果需要满足无障碍需求保持聚焦，可以给模态框的根容器设置tabIndex="-1"，然后在模态框打开时调用容器的focus()方法，聚焦容器本身就不会触发滚动到按钮的行为。
• 调整挂载节点：使用FluentUI的Portal组件，将模态框挂载到body节点下，脱离原来的滚动父容器，避免父容器的滚动干扰。

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