容器中的angularjs无限滚动答案

【问题标题】：angularjs infinite scroll in a container容器中的angularjs无限滚动
【发布时间】：2014-03-07 14:39:24
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript angularjs infinite-scroll nginfinitescroll

【解决方案1】：

使用此代码没有插件

在控制器中执行以下操作

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

将limit 变量设置为您希望首次显示的内容例如：$scope.limit=5

【讨论】：

这个比ng-infinite-scroll好很多

【解决方案2】：

我建议另一个无限卷轴：ui-scroll 它具有最基本的功能“在元素变得不可见时将其销毁，并在它们再次可见时重新创建它们”。 - 避免创建观察者并使您的应用程序迟缓

【讨论】：

值得一提的是，uiScroll 在应用于容器时也像一个魅力。

【解决方案3】：

这个帖子有点老了，但仍然很重要。

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

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

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

使用示例：

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

【讨论】：

stackoverflow.com/questions/33190595/…
谢谢，这对我有用。我将infinite-scroll-container 更改为infinite-scroll-parent="true"

【解决方案4】：

这是一个纯 HTML 的示例：

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

这里有两个陷阱：

要使无限滚动距离正常工作，无限滚动指令的子元素必须是您要枚举的元素，这样滚动距离触发器才能正确触发。
此示例中的无限滚动容器的值是双引号类名.content，然后用单引号括起来。如果您阅读源代码，字符串值最终会输入到document.querySelector。您可以阅读相关文档，了解它的预期价值。

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

【讨论】：

很好地抓住了引号。仅供参考，对我来说它是无限滚动容器=“'.container'”
你能帮我解决这个问题吗stackoverflow.com/questions/33190595/…
我注意到 addPage() （或任何人都调用它）被调用了很多。该指令似乎非常敏感。有没有办法让它不那么敏感并减少调用 addPage() 的频率？我已经在 0 和 2000 处尝试了无限滚动距离，但无论哪种情况，它都会在我滚动到底部之前调用该函数。

【解决方案5】：

如果有人搜索相同的内容并来到这里 - 这里是有用的链接：

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

【讨论】：

我有一个类似的问题，我想为滚动指定容器，但它不起作用。分享了演示的链接。谁能告诉我问题是什么？ stackblitz.com/edit/…

【解决方案6】：

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

备注：一个稳健的解决方案是向具有容器 id 的无限滚动添加一个 attr 参数。

【讨论】：