Question

嗨，当我在firefox中使用Angular材质打开一个对话框窗口时。关闭对话框后，页面滚动到顶部。任何人都可以解释为什么会发生这种情况或有解决方法。

请参阅https://codepen.io/WitteStier/full/EmzKQb/

HTML

<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app="App" ng-controller="AppCtrl">

    <div style="height:1500px;">Scroll down</div>

    <md-button ng-click="openDialog($event)">
      Open dialog
    </md-button>

    <div style="visibility: hidden">
      <div class="md-dialog-container" id="dialog-window">
        <md-dialog>
          <md-toolbar>
            <div class="md-toolbar-tools">
              <h2>Hi</h2>
            </div>
          </md-toolbar>
          <md-dialog-content>
            <div class="md-dialog-content">
              <p>Creativity is hard to define.</p>
            </div>
          </md-dialog-content>
        </md-dialog>
      </div>
    </div>

</body>
</html>

JS

angular.module('App', ['ngMaterial'])
  .controller('AppCtrl', function($scope, $mdDialog) {
    $scope.openDialog = function(ev) {
      $mdDialog.show({
        contentElement: '#dialog-window',
        parent: angular.element(document.body),
        targetEvent: ev,
      });
    };
  });

Answer 1

在此拉取请求中看起来已修复： https://github.com/angular/material/pull/10549 将角度材料版本更新为1.1.5，它应该可以工作。

Answer 2

这是一种解决方法。只需将滚动从body元素移动到内部元素，如下所示：

<body>
    <div id="container">
        ... Your content ...
    </div>
</body>

body{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#container{
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}

在关闭firefix中的对话框后，Angular 1材质设计滚动到顶部

2 个答案: