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.您可以阅读相关文档,了解它所期望的价值.

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

Answer 3

这个线程有点旧,但仍然没有相关性.

看起来,ng-infinite-scroll在一些分叉解决方案中合并,现在支持以下(未记录的)属性:

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

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

样品用途:

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

Answer 4

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