When you want to progressively load new content as the user scrolls down your Page.
Infinite Scroll loads items in advance when less than one screen height is left to be seen. If the content you fetch has height less than the container’s height on screen then Infinite Scroll will continue loading more content. So make sure you load enough content.
|Yes||Function||Method from VM to be called to load more content|
|Empty||Use it when you place your infinite scroll within an overflowed DOM element|
|Number||Offset (pixels) to bottom of Infinite Scroll container from which the component should start loading more content in advance. Default it’s one container height.|
|Tells Infinite Scroll to load more content, regardless of the scroll position.|
|Resets calling index to 0.|
|Stops working, regardless of scroll position.|
|Starts working. Checks scroll position upon call and if trigger is hit, it loads more content.|
|Checks scroll position and loads more content if necessary.|
The handler Function takes two parameters:
index parameter can be used to make some sort of pagination on the content you load. It takes numeric values starting with 1 and incrementing with each call.
Use it when you place your infinite scroll within an overflowed DOM element.
If for some reason you need to control the working state of Infinite Scroll component, use a Vue reference and call methods from above.