Question

我知道使用angularJs并使用ngView，当在不同视图之间前后导航时，滚动位置将保留。现在我在视图中使用了角度材质md-toolbar和md-content指令，但它不保留滚动位置。

是否有任何解决方案可以在md-content内的不同视图之间保留ngView的滚动位置？

下面的代码将重现问题，这是一个plunker演示： demo

的index.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视图。

Answer 1

自动保留滚动位置是浏览器的工作，浏览器只保留整页的滚动位置而不是页面内部元素的滚动位置。

在使用md-content时，由于您拥有overflow:auto和height:100%以及min-height:100%，您的示例中的页面没有任何滚动，因为您看到了滚动条属于md-content所以我说浏览器不能保留滚动的位置，因为滚动属于内部元素。

对于div情况，因为默认情况下div会扩展为大内容，因此滚动属于该页面，浏览器会保留滚动位置。

解决问题：

您可以使用标签和样式的组合，使页面滚动并获得自动滚动位置保留。
您还可以将md-content的滚动位置存储在模型中或其他位置，在显示页面时，将位置应用到md-content。

在“ngView”中的不同视图之间保留“md-content”滚动位置

1 个答案: