Angular 1 material design scrolls to top after closing dialog in firefix

问题

Hi when i open a dialog window using Angular material in firefox. The page scrolls to the top after the dialog is closed. Can anyone explain why this happens or have a workaround.

See 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>

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,
      });
    };
  });

回答1:

Looks like it was fixed in this pull request: https://github.com/angular/material/pull/10549 Update your angular material version to 1.1.5 and it should work.

回答2:

Here is a workaround. Just move the scroll from the body element to an inner element like below:

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

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

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

来源：https://stackoverflow.com/questions/44222457/angular-1-material-design-scrolls-to-top-after-closing-dialog-in-firefix

标签

angularjs

firefox

angular-material