保持滚动位置时prepending内容列表（AngularJS） [英] Maintain the scroll position when prepending content to a list (AngularJS)

问题描述

我一直用努力prePEND一些资料转移到滚动容器内的列表 NG-重复，以及最近的应该是在顶部的列表。我还需要保持滚动位置在容器的滚动条是不是在最高层时prepending内容。

下面是我的解决方案，但我仍然有一个问题。总有一个闪光灯（或延迟）后角已DOM渲染prepended项目。

\r

\r

VAR对myApp = angular.module（'对myApp'，[]）;\r
\r
myApp.controller（'MainCtrl'，函数（$范围，$区间，$超时）{\r
  $ scope.items = [];\r
  $间隔（函数（）{\r
    VAR项目= {\r
      ID：的Math.random（）\r
      文字：（新日期（））的toString（）。\r
    };\r
    $ scope.items.unshift.apply（$ scope.items，[项目]）;\r
\r
    变量$ =容器$（'流的容器。'）;\r
    变量$ topItem = $（'。项目：第一'）;\r
    变种oScrollTop = $ container.scrollTop（）;\r
    VAR oOffset = $ topItem.length？ $ topItem.position（）顶：0。\r
\r
    $超时（函数（）{\r
      //执行的DOM呈现完毕后，\r
      如果（$ container.scrollTop（）！== 0）{\r
        $ container.scrollTop（oScrollTop +（$ topItem.length $ topItem.position（）顶：0） - oOffset）;\r
      }\r
    }）;\r
  }，1000）;\r
}）;

\r

.stream容器{\r
  溢出-Y：滚动;\r
  溢出 - X：无;\r
  高度：100像素;\r
  位置：相对;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT;机身NG-应用=对myApp＆GT;\r
  ＆LT; D​​IV CLASS =流容器NG控制器=MainCtrl＆GT;\r
    ＆LT; D​​IV CLASS =流＆GT;\r
      ＆LT; D​​IV CLASS =项NG重复=中的项项跟踪由item.id＆GT; {{item.text}}＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; /身体GT;

\r

\r

\r

解决方案

我发现<一个href=\"http://blogs.microsoft.co.il/choroshin/2014/04/08/angularjs-postdigest-vs-timeout-when-dom-update-is-needed/\"相对=nofollow>这个帖子并改变了 $超时到 $范围。$$ postDigest 。现在，它工作正常。

\r

\r

VAR对myApp = angular.module（'对myApp'，[]）;\r
\r
myApp.controller（'MainCtrl'，函数（$范围，$区间，$超时）{\r
  $ scope.items = [];\r
  $间隔（函数（）{\r
    VAR项目= {\r
      ID：的Math.random（）\r
      文字：（新日期（））的toString（）。\r
    };\r
    $ scope.items.unshift.apply（$ scope.items，[项目]）;\r
\r
    变量$ =容器$（'流的容器。'）;\r
    变量$ topItem = $（'。项目：第一'）;\r
    变种oScrollTop = $ container.scrollTop（）;\r
    VAR oOffset = $ topItem.length？ $ topItem.position（）顶：0。\r
\r
    $范围。$$ postDigest（函数（）{\r
      //执行的DOM呈现完毕后，\r
      如果（$ container.scrollTop（）！== 0）{\r
        $ container.scrollTop（oScrollTop +（$ topItem.length $ topItem.position（）顶：0） - oOffset）;\r
      }\r
    }）;\r
  }，1000）;\r
}）;

\r

.stream容器{\r
  溢出-Y：滚动;\r
  溢出 - X：无;\r
  高度：100像素;\r
  位置：相对;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT;机身NG-应用=对myApp＆GT;\r
  ＆LT; D​​IV CLASS =流容器NG控制器=MainCtrl＆GT;\r
    ＆LT; D​​IV CLASS =流＆GT;\r
      ＆LT; D​​IV CLASS =项NG重复=中的项项跟踪由item.id＆GT; {{item.text}}＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; /身体GT;

\r

\r

\r

I've been trying to prepend some items to a list within a scrollable container by using ng-repeat, and the recent one should be at the top of the list. I also need to maintain the scroll position if the scroll bar of the container is not at the very top when prepending content.

Here is my solution, but I still have a problem. There is always a flash (or delay) after angular has rendered prepended items in dom.

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', function($scope, $interval, $timeout) {
  $scope.items = [];
  $interval(function() {
    var item = {
      id: Math.random(),
      text: (new Date()).toString()
    };
    $scope.items.unshift.apply($scope.items, [item]);

    var $container = $('.stream-container');
    var $topItem = $('.item:first');
    var oScrollTop = $container.scrollTop();
    var oOffset = $topItem.length ? $topItem.position().top : 0;

    $timeout(function() {
      // Executed after the dom has finished rendering
      if ($container.scrollTop() !== 0) {
        $container.scrollTop(oScrollTop + ($topItem.length ? $topItem.position().top : 0) - oOffset);
      }
    });
  }, 1000);
});

.stream-container {
  overflow-y: scroll;
  overflow-x: none;
  height: 100px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body ng-app="myApp">
  <div class="stream-container" ng-controller="MainCtrl">
    <div class="stream">
      <div class="item" ng-repeat="item in items track by item.id">{{ item.text }}</div>
    </div>
  </div>
</body>

解决方案

I found this post and changed $timeout to $scope.$$postDigest. Now it works as expected.

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', function($scope, $interval, $timeout) {
  $scope.items = [];
  $interval(function() {
    var item = {
      id: Math.random(),
      text: (new Date()).toString()
    };
    $scope.items.unshift.apply($scope.items, [item]);

    var $container = $('.stream-container');
    var $topItem = $('.item:first');
    var oScrollTop = $container.scrollTop();
    var oOffset = $topItem.length ? $topItem.position().top : 0;

    $scope.$$postDigest(function() {
      // Executed after the dom has finished rendering
      if ($container.scrollTop() !== 0) {
        $container.scrollTop(oScrollTop + ($topItem.length ? $topItem.position().top : 0) - oOffset);
      }
    });
  }, 1000);
});

.stream-container {
  overflow-y: scroll;
  overflow-x: none;
  height: 100px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body ng-app="myApp">
  <div class="stream-container" ng-controller="MainCtrl">
    <div class="stream">
      <div class="item" ng-repeat="item in items track by item.id">{{ item.text }}</div>
    </div>
  </div>
</body>

这篇关于保持滚动位置时prepending内容列表（AngularJS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！