如何重置模态滚动时间模态的内容已更新？

Question

我正在使用 ng-bootstrap 作为我的应用程序的模式。

我的模式有多个带有 下一步 和返回按钮的页面。

当页面很长并且必须滚动时，它加载在模式的中心而不是顶部。

它应该总是像这样加载：

但是加载是这样的：

第一张图片是我的模式的顶部，标题为“模式标题”，每次打开模式或切换到其他页面时都应该加载它。

但是当前的行为就像第二张图片，它在中间加载模态框而不显示标题“模态框标题”。

我如何确保它始终将我的模态视图重置为我的模态的最上部分？

我的模态组件只有modal.component.ts、modal.component.html和modal.component.css 因为它不是使用路由器来加载页面，而是调用函数并加载页面。

Answer 1

您可以通过将可滚动元素的 scrollTop 设置为 0 来设置滚动位置。

<div #scrollableContainer>
  <h1>Mos approves!</h1>
</div>

<button (click)="goBack(); scrollableContainer.scrollTop = 0">Back</button>
<button (click)="goFuther(); scrollableContainer.scrollTop = 0">Next</button>

Answer 2

如果有人仍在寻找答案，我为解决此问题所做的就是在我的 html 文件的 header 上设置一个 ID，如下所示：

<div class="modal-header" id="modalHeader">
   <h3> Modal title </h3>

然后我将下面这行代码添加到每个需要滚动到首页的函数中：

document.getElementById("modalHeader").scrollIntoView();

如何重置模态滚动时间模态的内容已更新？

How to reset modal scroll time modal's content is updated?

ng-bootstrap

angular