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.

Answer 3

This thread is a bit old, non-the-less still relevant.

As it seems, ng-infinite-scroll merged in some of the forked solutions, and now supports the following (undocumented) attributes:

infiniteScrollContainer lets you set the container by passing in a query selector or function or html element

infiniteScrollParent simply tells it to use the parent as the container (instead of $window)

Sample use:

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

Answer 4

I'm suggesting another infinity scroll: ui-scroll it has the most fundamental feature "destroying elements as they become invisible and recreating them if they become visible again." - avoids creating watcher and make you app sluggish

Answer 5

Open the ng-infinite-scroll.js file and change all reference of $window to $("#my-content-container").

Remark: a robust solution would be to add an attr parameter to the infinite-scroll with the id of the container.

Answer 6

use this code there is no plugin

in controller do the following

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

Set the limit variable as you want to display first-time example: $scope.limit=5