每次使用 ReactJS 渲染时，如何将流畅的 UI 模式滚动到顶部答案

【问题标题】：How to scroll a fluent UI modal to the top everytime it renders using ReactJS每次使用 ReactJS 渲染时，如何将流畅的 UI 模式滚动到顶部
【发布时间】：2021-02-08 13:57:52
【问题描述】：

在 SPFX (SPO) webpart 中，我有 2 个按钮可以更改模态表单上的页面。每次呈现下一页时，我都希望它滚动到顶部。我正在尝试为 MS Fluent UI 模式分配一个 ID，但不能。如果我能做到这一点，那么我确定我可以使用element.scrollTo() 等。这是模态：

<Modal
            
 titleAriaId={this._titleId}
 subtitleAriaId={this._subtitleId}
 isOpen={this.state.showModal}
 onDismiss={this._closeModal}
 closeButtonAriaLabel={"Close"}
 isBlocking={true}
 containerClassName={this.state.ReduceSize}
 id={'modal') //it doesn't accept this!
 >

<div id={'top'} ... />

我还尝试为每个页面使用 'top' 的 id 标签，并尝试在单击下一页按钮时使用类似的内容：

  var el = document.getElementById('top');
      console.log(el); //This gets the correct id and displays the className details. But how can I scroll to it?
      
el.scrollTo() //or whatever should work because this doesn't.

我已阅读 https://reactjs.org/docs/refs-and-the-dom.html 的文档和 https://developer.microsoft.com/en-us/fluentui#/controls/web/modal#IModal 在后者中，我特别注意了 componentRef 属性，它可以保存答案，但由于没有示例而对如何使用一无所知。需要一些帮助。

【问题讨论】：

标签： reactjs modal-dialog spfx

【解决方案1】：

找到了：

我有一个页脚组件，上面有 2 个按钮。下一个和上一个。我正在使用处理程序函数将按钮的功能传递给父级，我将它插入到处理程序中：

  var el = document.getElementById('top');
      console.log(el);
      el.scrollIntoView();

并且还将id={'top'} 应用于模态的标题。我现在每次换页，都会跳到最上面！

【讨论】：