angularjs容器中的无限滚动

Question

我正在尝试使用angularjs无限滚动它似乎只有在滚动相对于浏览器窗口时才有效。

我想在内部DIV中进行无限滚动，即我有一个带有通用包装器的页面和一个用于显示实际内容的内部div。

包装页面设置为经过整个窗口，因此永远不会滚动。 但是包含内容的内部div有自己的滚动条。

如何让无限滚动相对于内容内容div滚动条工作？

Answer 1

如果有人搜索同一个并来到这里 - 这里是有用的链接：

https://github.com/BinaryMuse/ngInfiniteScroll/pull/7 （拉取请求和讨论）

https://github.com/hlsolutions/ngInfiniteScroll/tree/scroll-on-any-lement （带有必要功能的fork）

https://raw.github.com/hlsolutions/ngInfiniteScroll/scroll-on-any-lement/src/infinite-scroll.coffee （来源本身）

你可以这样使用它（例如haml）：

.div-with-overflow
  %ul{data: {'infinite-scroll' => "getItems()", 'infinite-scroll-disabled' => 'cannotGetItems()', 'infinite-scroll-parent' => 'true'}}

提供'infinite-scroll-parent' => 'true'将使父元素用于计算而不是窗口。

Answer 2

以下是纯HTML中的示例：

<div class="content">
    <div infinite-scroll="addPage()" infinite-scroll-container='".content"'>
        <div ng-repeat="recipe in recipes">

两个问题在这里：

1. 要使无限滚动距离正常工作，无限滚动指令的子元素必须是您枚举的元素，因此滚动距离触发器将正确触发。
2. 此示例中的infinite-scroll-container的值是双引号类名.content然后用单引号括起来。 如果您读取源，则字符串值最终会被送入document.querySelector 。 您可以阅读相关文档，了解它所期望的价值。

如果无限滚动指令的直接父元素是可滚动容器，也可以使用@trushkevich建议的infinite-scroll-parent助手。

Answer 3

这个线程有点旧，但仍然没有相关性。

看起来，ng-infinite-scroll在一些分叉解决方案中合并，现在支持以下（未记录的）属性：

infiniteScrollContainer允许您通过传入查询选择器或函数或html元素来设置容器

infiniteScrollParent只是告诉它使用父对象作为容器（而不是$ window）

样品用途：

<div class="scroller-companies" infinite-scroll="showMorePlaces()" infinite-scroll-parent="true">

Answer 4

我建议另一个无限滚动： ui-scroll它具有最基本的特征“破坏元素，因为它们变得不可见，并且如果它们再次可见则重新创建它们。” - 避免创建观察者并让你的应用程序缓慢

Answer 5

打开ng-infinite-scroll.js文件，将$ window的所有引用更改为$（“＃my-content-container”）。

备注：一个强大的解决方案是将attr参数添加到带有容器id的无限滚动。

Answer 6

使用此代码没有插件

在控制器中执行以下操作

$(".Scrollx").scroll(function () {
        if ($('.Scrollx').scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            $scope.limit = $scope.limit + 5;      
        }
});

设置limit变量，以显示第一个示例： $scope.limit=5