$mdToast 显示/隐藏在设置溢出-y 时导致屏幕滚动到网站顶部 - AngularJS

Question

当用户提交表单时，我有一个简单的祝酒词

$mdToast.show(
    $mdToast.simple()
    .textContent('Your order form has been submitted.')
    .position('bottom left')
    .hideDelay(5000)
);

它起作用了，吐司出现在左下角，用户可以在网站可见时向下滚动。当它显示/隐藏时，它不会将视图滚动到屏幕顶部。但是我遇到了一个错误，吐司导致屏幕跳跃，因为它隐藏了垂直滚动条，然后又重新出现。

为了解决这个问题，我添加了

html {
    overflow-y:scroll;
}

这阻止了屏幕跳跃，但现在当 toast 显示/隐藏时，它会将屏幕滚动到页面顶部。

如何阻止它在显示/隐藏时滚动？

Answer 1

我遇到了同样的问题，

我是这样解决的：

在body中添加一个专用的div：

<div id="toast-container"></div>

使用这个 CSS：

  #toast-container
    position fixed
    top 0
    right 0
    left 0
    bottom 0
    visibility hidden
    > *
      visibility visible

然后，只需在调用中添加父级：

  $mdToast.show({
    // ....
    parent: document.getElementById('toast-container')
  });