35

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

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

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

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

4

6 回答 6

28

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

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

于 2014-03-07T11:27:28.853 回答
18

这是一个纯 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. 您可以阅读相关文档以查看它期望的值。

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

于 2015-02-15T00:38:49.860 回答
11

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

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

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

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

样品用途：

<div class="scroller-companies" infinite-scroll="showMorePlaces()" infinite-scroll-parent="true">
于 2015-06-14T19:46:40.853 回答
6

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

于 2014-10-06T19:51:46.550 回答
3

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

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

于 2014-02-10T10:20:32.973 回答
1

使用此代码没有插件

在控制器中执行以下操作

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

limit根据您想要显示的第一次示例设置变量：$scope.limit=5

于 2016-09-08T06:25:39.380 回答