Saya tahu dengan AngularJs dan menggunakan ngView
, posisi gulir akan dipertahankan saat menavigasi maju dan mundur di antara tampilan yang berbeda. Sekarang saya telah menggunakan arahan material sudut md-toolbar
dan md-content
dalam pandangan saya tetapi tidak mempertahankan posisi gulir.
Apakah ada solusi untuk mempertahankan posisi gulir md-content
di antara tampilan berbeda dalam ngView
?
Kode di bawah ini akan mereproduksi masalah dan berikut adalah demo plunker: demo
indeks.html:
<body layout="row" ng-app="scrollPostion">
<div flex layout="column" layout-fill ng-view> </div>
<md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
<md-list>
<md-list-item>
<a href="/id#/page1">page1</a>
</md-list-item>
<md-list-item>
<a href="/id#/page2">page2</a>
</md-list-item>
</md-list>
</md-sidenav>
<script type="text/javascript">
angular
.module('scrollPostion', ['ngRoute', 'ngMaterial'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'page1.html',
}).
when('/page1', {
templateUrl: 'page1.html',
}).
when('/page2', {
templateUrl: 'page2.html',
}).
otherwise({ redirectTo: '/' })
}])
</script>
</body>
lihat 1 (halaman 1):
<md-toolbar layout="row" class="md-toolbar-tools">
<h1>Page1</h1>
</md-toolbar>
<md-content flex id="content">
<div>
<p>long text1</p>
</div>
</md-content>
lihat 2 (halaman 2):
<md-toolbar layout="row" class="md-toolbar-tools">
<h1>Page2</h1>
</md-toolbar>
<md-content flex id="content">
<div>
<p>long text2</p>
</div>
</md-content>
Saya tahu masalahnya disebabkan oleh arahan md-content
, karena ketika saya menggantinya dengan div
, mempertahankan posisi gulir akan berfungsi tetapi saya memerlukan md-toolbar
dan md-content
dalam pandangan saya.