Mempertahankan posisi gulir konten md di antara tampilan berbeda dalam ngView

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.


person Asieh Mokarian    schedule 12.11.2015    source sumber


Jawaban (1)


Mempertahankan posisi gulir secara otomatis adalah tugas browser dan browser hanya mempertahankan posisi gulir seluruh halaman, bukan posisi gulir elemen dalam halaman.

Dalam sampel Anda saat menggunakan md-content karena memiliki overflow:auto dan height:100% dan min-height:100% halaman tidak memiliki gulir apa pun dan seperti yang Anda lihat, gulir tersebut milik md-content jadi seperti yang saya katakan browser tidak dapat mempertahankan posisi gulir, karena gulir milik elemen dalam.

Untuk kasus div, karena div secara default meluas ke konten berukuran besar, maka gulir menjadi milik halaman dan browser mempertahankan posisi gulir.

Untuk memecahkan masalah:

  • Anda dapat menggunakan kombinasi tag dan gaya yang membuat halaman bergulir dan mendapatkan posisi gulir otomatis.
  • Anda juga dapat menyimpan posisi gulir md-content Anda di model Anda atau di tempat lain dan saat menampilkan halaman, terapkan posisi tersebut ke md-content Anda.
person Reza Aghaei    schedule 13.11.2015