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

本文介绍了在关闭对话框后，Angular 1材质设计滚动到顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

请参阅

HTML

 < html lang =en> 
< head> 
< meta name =viewportcontent =width = device-width，initial-scale = 1> 
< / head> 
< body ng-app =Appng-controller =AppCtrl> 
 
< div style =height：1500px;>向下滚动< / div> 
 
< md-button ng-click =openDialog（$ event）> 
打开对话框
< / md-button> 
 
< div style =visibility：hidden> 
< div class =md-dialog-containerid =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> 
< / 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，
}）; 
}; 
}）;

解决方案

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

 < body> 
< div id =container> 
 ...您的内容... 
< / div> 
< / body> 
 
 body {
 height：100％; 
宽度：100％; 
 overflow：hidden; 
} 
 
 #container {
 height：100％; 
宽度：100％; 
 overflow-y：scroll; 
}

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

解决方案

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

这篇关于在关闭对话框后，Angular 1材质设计滚动到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！