在 "ngView" 内的不同视图之间保留 "md-content" 滚动位置

Question

我知道使用 angularJs 和使用 ngView，在不同视图之间来回导航时，滚动位置将保持不变。现在我在我的视图中使用了 angular material md-toolbar 和 md-content 指令，但它不保留滚动位置。

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

下面的代码将重现该问题，这里是一个 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" 滚动位置

Retaining "md-content" scroll position between different views within "ngView"

html

angularjs

angular-material