如何在AngularJS中保留ng-repeat的滚动位置？

发布时间：2020-12-17 08:30:57 所属栏目：安全来源：网络整理

导读：DEMO 使用ng-repeat渲染对象列表。假设这个列表很长，用户滚动到底部看到一些对象。当用户观察对象时，一个新项目被添加到列表的顶部。这导致观察到的对象改变其位置，即，用户突然在被观察对象的相同位置处看到别的东西。在添加新项目时，如何保持观察对

DEMO

使用ng-repeat渲染对象列表。假设这个列表很长，用户滚动到底部看到一些对象。

当用户观察对象时，一个新项目被添加到列表的顶部。这导致观察到的对象改变其位置，即，用户突然在被观察对象的相同位置处看到别的东西。

在添加新项目时，如何保持观察对象在同一位置？

PLAYGROUND HERE

它可能解决相当优雅，通过使用scrollTop属性的div。我使用两个指令 – 一个处理包装元素的滚动位置，其他注册新元素。
如果有什么不清楚，给我一个呼喊。

DEMO

JS：

.directive("keepScroll",function(){

  return {

    controller : function($scope){
      var element = null;

      this.setElement = function(el){
        element = el;
      }

      this.addItem = function(item){
        console.log("Adding item",item,item.clientHeight);
        element.scrollTop = (element.scrollTop+item.clientHeight+1);
       //1px for margin from your css (surely it would be possible
       // to make it more generic,rather then hard-coding the value)
      };

    },link : function(scope,el,attr,ctrl) {

     ctrl.setElement(el[0]);

    }

  };

})

.directive("scrollItem",function(){

  return{
    require : "^keepScroll",att,scrCtrl){
      scrCtrl.addItem(el[0]);
    }
  }
})

HTML：

<div class="wrapper" keep-scroll>
  <div class="item" scroll-item ng-repeat="item in items  | orderBy: '-id'">
    {{ item.name }}
   </div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!