在关闭对话框后，Angular 1材质设计滚动到顶部 [英] Angular 1 material design scrolls to top after closing dialog in firefix
本文介绍了在关闭对话框后，Angular 1材质设计滚动到顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请参阅 https://codepen.io/WitteStier/full/EmzKQb/
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>
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，
}）;
};
}）;
解决方案
这是一个解决方法。只需将滚动从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>
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,
});
};
});
解决方案
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材质设计滚动到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
