Сохранение позиции прокрутки md-content между различными представлениями в ngView

Я знаю, что с angularJs и использованием ngView положение прокрутки будет сохраняться при переходе назад и вперед между разными представлениями. Теперь я использовал директивы углового материала md-toolbar и md-content в своих представлениях, но он не сохраняет позицию прокрутки.

Есть ли решение сохранить положение прокрутки md-content между разными представлениями в ngView?

Код ниже воспроизведет проблему, а вот демонстрация плункера: демонстрация

индекс.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="#/page1">page1</a> 
           </md-list-item>
           <md-list-item>
               <a href="#/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>

вид 1 (страница 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>

вид 2 (страница 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>

Я знаю, что проблема связана с директивой md-content, потому что, когда я заменю ее на div, сохранение положения прокрутки будет работать, но мне нужны md-toolbar и md-content в моих представлениях.


html angularjs angular-material
person Asieh Mokarian    schedule 12.11.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Автоматическое сохранение позиции прокрутки — это работа браузера, и браузер сохраняет только позицию прокрутки всей страницы, а не позицию прокрутки внутренних элементов страницы.

В вашем примере при использовании md-content из-за наличия overflow:auto и height:100% и min-height:100% на странице нет прокрутки, и, как вы видите, прокрутка принадлежит md-content, поэтому, как я сказал, браузер не может сохранить позицию прокрутки, потому что scroll принадлежит внутреннему элементу.

Для случая div, поскольку div по умолчанию расширяется до большого содержимого, поэтому прокрутка принадлежит странице, а браузер сохраняет позицию прокрутки.

Решить проблему:

  • Вы можете использовать комбинацию тегов и стилей, которая заставляет страницу прокручиваться и автоматически сохранять позицию прокрутки.
  • Вы также можете сохранить положение прокрутки вашего md-content в своей модели или где-то еще и при отображении страницы применить положение к вашему md-content.
person Reza Aghaei    schedule 13.11.2015