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?

Nigrescent

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.

Krebs

I have a similar issue where I want to specify the container for the scroll but it does not work. Shared the link for the demo. Can anyone tell me what the issue is? stackblitz.com/edit/… – Soniasonic

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.

Eno

Nice catch on the quotes. Fyi, for me it was infinite-scroll-container="'.container'" – Chappelka

Can you please help me with this #33191095 – Audacity

I've noticed that the addPage() (or w/e anyone calls it) gets called a lot. The directive seems very sensitive. Is there a way to make it less sensitive and call addPage() less frequently? I've tried infinite-scroll-distance at 0 and 2000, but it's calling the function well before I scroll to the bottom in either case. – Vienna

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">

Alcove

#33191095 – Audacity

Thanks, this worked for me. I change infinite-scroll-container with infinite-scroll-parent="true" – Fuchsia

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

Paapanen

It should be mentioned that uiScroll works like a charm when applied to a container as well. – Shu

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.

Nigrescent

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

Aeromancy

This one is a lot better than ng-infinite-scroll – Geneva