angularjs infinite scroll in a container

Question

I'm trying to use angularjs infinite scroll It seems to work only if the scroll is relative to the browser window.

I would like to do infinite scroll in an inner DIV, i.e. I have a page with a generic wrapper and an inner div for displaying the actual content.

The wrapper page is set to elapse the entire window, thus it is never scrollable. but the inner div that contain content, has its own scroll bar.

How to I get the infinite scroll to work relative to the inner content div scrollbar?

Answer 1

In case anyone searches the same and comes here - here are usefull links:

https://github.com/BinaryMuse/ngInfiniteScroll/pull/7 (pull request and discussion)

https://github.com/hlsolutions/ngInfiniteScroll/tree/scroll-on-any-lement (fork with neccessary functionality)

https://raw.github.com/hlsolutions/ngInfiniteScroll/scroll-on-any-lement/src/infinite-scroll.coffee (source itself)

You can use it this way (example is in haml):

.div-with-overflow   %ul{data: {'infinite-scroll' => "getItems()", 'infinite-scroll-disabled' => 'cannotGetItems()', 'infinite-scroll-parent' => 'true'}} 

Providing an 'infinite-scroll-parent' => 'true' will make parent element to be used for calculations instead of a window.

Answer 2

Here is an example in plain HTML:

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

Two gotchas here:

1. For infinite-scroll-distance to work properly, the child element of your infinite-scroll directive has to be the elements you are enumerating, so the scroll distance trigger will fire correctly.
2. The value of infinite-scroll-container in this example is double-quoted class name .content then wrapped by single quotes. If you read the source, the string value eventually gets fed into document.querySelector. You can read the documentation on that to see what value it expects.

You can also use the infinite-scroll-parenthelper like @trushkevich suggested if the immediate parent element of your infinite-scroll directive is the scrollable container.