Question

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

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

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

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

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

Answer 2

以下是纯HTML格式的示例：

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

这里有两个问题：

要使无限滚动距离正常工作，无限滚动指令的子元素必须是您枚举的元素，因此滚动距离触发器将正确触发。
此示例中的无限滚动容器的值是双引号类名.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

angularjs容器中的无限滚动

6 个答案: