javascript - 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.