Question

133

angularjs infinite scroll in a container

rated 0 times [ 137] [ 4] / answers: 1 / hits: 48808 / 11 Years ago, mon, february 10, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brynn

Add To Favorites

Follow

Total Points: 448

Total Questions: 83

Total Answers: 118

Location: Albania

Member since Sun, Nov 22, 2020

4 Years ago

answered 11 Years ago alorac · Accepted Answer

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.