容器中的AngularJS无限滚动

Question

我想使用angularjs无限滚动，但好像只有当滚动条相对于浏览器窗口时才有效。

我希望在内部DIV中实现无限滚动，即我有一个页面用于包装所有内容，还有一个用于显示实际内容的内部div。

包装页面设置为覆盖整个窗口，因此它不可滚动。但是包含内容的内部div有自己的滚动条。

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

- Elia Weiss

Answer 1

如果有人搜索相同的问题并来到这里 - 这是一些有用的链接:

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

https://github.com/hlsolutions/ngInfiniteScroll/tree/scroll-on-any-lement（带有所需功能的分支）

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'将使用父元素进行计算而不是窗口。

- trushkevich

---

我有一个类似的问题，我想指定滚动容器，但它不起作用。分享了演示的链接。有人能告诉我问题出在哪里吗？https://stackblitz.com/edit/ngx-infinite-scroll-ngdxwc?file=src%2Fapp%2Fapp.component.html - Quest

Answer 2

这是一个纯HTML的例子：

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

这里有两个需要注意的地方:

1. 为了让 infinite-scroll-distance 正常工作，你的无限滚动指令（infinite-scroll directive）的子元素必须是你正在枚举的元素，这样滚动距离触发器才能正确触发。
2. 在这个示例中，infinite-scroll-container 的值是双引号类名 .content，然后用单引号包裹起来。如果你查看源代码，这个字符串值最终被传入到 document.querySelector 中。你可以阅读相关文档，了解它所期望的这个值。

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

- jtlai

---

引号的使用很到位。顺便说一下，对我来说，它是无限滚动容器="'.container'"。 - ericpeters0n

你能帮我解决这个问题吗？https://dev59.com/AFwX5IYBdhLWcg3w8TXM - dark_shadow

我注意到addPage()（或其他人称之为的名称）被频繁调用。该指令似乎非常敏感。有没有办法使其不那么敏感，减少对addPage()的调用次数？我尝试将infinite-scroll-distance设置为0和2000，但在任何情况下，它都会在我滚动到底部之前就调用该函数。 - user137717

Answer 3

这个主题有点旧，但仍然相关。

似乎 ng-infinite-scroll 已经合并了一些分叉的解决方案，并且现在支持以下（未记录的）属性：

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

infiniteScrollParent 简单地告诉它使用父容器（而不是 $window）

示例用法：

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

- TheZuck

---

https://dev59.com/AFwX5IYBdhLWcg3w8TXM - dark_shadow

谢谢，这对我有用。我将infinite-scroll-container更改为infinite-scroll-parent="true"。 - alin0509

Answer 4

我建议另一种无限滚动：ui-scroll，它具有最基本的功能“当元素变得不可见时销毁它们，如果它们再次变得可见，则重新创建”- 避免创建观察器并使您的应用程序变慢。

- Endless

---

值得一提的是，当应用于容器时，uiScroll 的效果也非常好。 - F Lekschas

Answer 5

打开ng-infinite-scroll.js文件，将所有$window的参考更改为$("#my-content-container")。

备注：一个强大的解决方案是向无限滚动添加attr参数，并将容器的id作为参数传递。

- Elia Weiss

Answer 6

请使用此代码，无需插件。

在控制器中执行以下操作：

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

将变量limit设置为您想要显示的数量 例如：$scope.limit=5

- Raja

---

这个比ng-infinite-scroll好多了。 - Emad Salah