# Infinite scroll

# Basic usage

<xf:js src="TC/ComponentLibrary/infinite_scroll.js" addon="TC/ComponentLibrary" min="1" />

<div class="block" data-xf-init="tc-infinite-scroll" data-append=".itemContainer">
    <div class="block-container">
        <div class="block-body">  
            <div class="itemContainer">
                <xf:foreach loop="$items" value="$item">
                    <xf:comment>Code here</xf:comment>
                </xf:foreach>
            </div>
        </div>
    </div>

    <div class="block-outer block-outer--after">
        <xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
                    link="demo/infinite-scroll"
                    wrapperclass="block-outer-main" />
    </div>
</div>

# TeslaCloud.InfiniteScroll (tc-infinite-scroll)

# Arguments

Argument	Default value	Description
append	null	Selector for adding content.
hideNav	false	If `true`, the pagination block will be hidden on the page.
history	true	If `true`, the transition to the next page will be recorded in the browser history.
scrollPercent	100	The percentage of scrolling required to load the next page.
considerFooter	true	If `true`, the height of the footer (`#footer`) will be considered when calculating the scroll height.