Javascript 在div内向上滚动时无限滚动

我正在使用AngularJS和Laravel构建一个聊天系统

我想在使用AngularJS的div容器中有一个无限滚动条。我想要的是一个聊天框，当用户点击用户名时，它会显示最近的30条聊天信息；当用户在容器（而不是浏览器窗口）中向上滚动时，我想运行一个AJAX请求并获取前30条记录，就像我们在facebook聊天应用程序中所做的那样

以下是我的HTML代码：

<ul class="chats" ng-repeat="chatData in DataChats">
    <li>
        <div class="message">
            <a> {{chatData.sender_fname }} </a>
            <span class="body"> {{chatData.message }} </span>
        </div>
    </li>
</ul>   

我已经搜索了AngularJS的依赖项，但我只在像这样的浏览器中找到了它。我怎样才能把集装箱装进集装箱 ?

这就是我想要实现的目标：

---

ngInfiniteScroll还支持容器（）的无限滚动，但我建议使用。它有更多的功能。 我也会回答你的问题

您可以使用“ui滚动”视口来使用容器的ui滚动

<ANY ui-scroll-viewport>
      ...
</ANY>

的源代码是一个简单示例所需的全部

演示的主要内容是coffeescript，下面是演示的javascript代码：

angular.module('application', ['ui.scroll', 'ui.scroll.jqlite']).factory('datasource', [
  '$log', '$timeout', function (console, $timeout) {
      var get;
      get = function (index, count, success) {
          return $timeout(function () {

              result = [];
              var i = index;
              for (i; i < index + count - 1 ;i++ ) {
                  result.push("item #" + i);
              }
              return success(result);
          }, 100);
      };
      return {
          get: get
      };
  }
]);
angular.bootstrap(document, ["application"]);

angular.module（'application'，['ui.scroll'，'ui.scroll.jqlite']）.factory（'datasource'[
“$log”、“$timeout”函数（控制台，$timeout）{
var-get；
get=函数（索引、计数、成功）{
返回$timeout（函数（）{
结果=[]；
var i=指数；
对于（i；i<索引+计数-1；i++）{
结果。推送（“项目#”+i）；
}
返回成功（结果）；
}, 100);
};
返回{
得到：得到
};
}
]);
引导（文档，[“应用程序]）；

正如文档中提到的，您所要做的就是实现
get
函数

，我为您提供了一个plunker来展示从json文件获取数据的示例
 谢谢@A.M我之前也看过这篇文章，但我现在面临的问题是ui scroll和ngInfiniteScroll没有简单的文档和一个我可以遵循和理解的示例。你能在这个ui scroll上给我一些指导吗？请告诉我如何在我的代码中实现这一点，我对此感到困惑，因为它这么多的演示，所以我不知道我应该使用哪一个，以及它们是如何工作的，因为它们只是演示没有文档，请帮助me@user5184398我更改了答案，提供了一个指向使用ui sroll的简单示例的链接。您可以在javascript中找到ui滚动的主要文件。您需要在文件旁边有
ui scroll jqlite.min.js
和
ui scroll.min.js
。我将为您提供演示的javascript作为回答。所以你不再需要咖啡了。不，如果你看到了，你会发现它正在使用一个测试数据，这个数据是在演示的脚本文件中生成的，如果你想从Json文件中获取数据，你需要使用$http.get（）来代替for循环。您必须从json获取数据并将其放入结果中。@user5184398，如果您发现答案有用，您可以向上投票并通过单击向上箭头和答案附近的复选标记接受：）
angular.module('application', ['ui.scroll', 'ui.scroll.jqlite']).factory('datasource', [
  '$log', '$timeout', function (console, $timeout) {
      var get;
      get = function (index, count, success) {
          return $timeout(function () {

              result = [];
              var i = index;
              for (i; i < index + count - 1 ;i++ ) {
                  result.push("item #" + i);
              }
              return success(result);
          }, 100);
      };
      return {
          get: get
      };
  }
]);
angular.bootstrap(document, ["application"]);