InfiniteScroll is a plugin that manages automating pagination loads with infinite scrolling.


Import the javascript file with import 'xtendui/src/infinitescroll'.

Initialize automatically within markup with [data-xt-infinitescroll="{ <options> }"].

Initialize manually within javascript with new Xt.Infinitescroll(document.querySelector('.my-container'), {/* options */}).


Remember to set a options.get variable for a get request on current url to load items. Also remember to set options.max number of pages.

Infinitescroll works also if your website is eligible for bfcache to resume previous state when using back/forward browser buttons. To disable default behaviour use or use options.nocache: false.

This is a speed optimization technique, it automatically prefetch next page.

Depending on website content the load more content may retain website scroll, use body { overflow-anchor: none; } to prevent that.

Try the demo on a new page to preview location hash changes.


Here are the main javascript options.

Inside elements.pagination:Query you can use this strings that gets populated with variables:

  • xt-num replaced with current page number
  • xt-tot replaced with total pages number
SyntaxDefault / ArgumentsDescription
Optiondebug:BooleanfalseDebug on console
Optionget:String|falsefalseurl get variable to use
Optionnocache:BooleantrueRestore scroll position on back and forward browser buttons
Optionprefetch:BooleantruePrefetch next page automatically
Optionmin:Number1Initial and minimum items / page number
Optionmax:Number'Infinity'Maximum items / page number
OptionperPage:Number1Items / pages per pagination
Optionevents.scrollUp:BooleanfalseAutomatically activate on scroll up
Optionevents.scrollDown:BooleanfalseAutomatically activate on scroll down
Optionevents.on:String|false'click'List of space separated events to trigger infinite scroll
Optionelements.itemsContainer:QueryfalseContainer query for items container
Optionelements.item:QueryfalseItems container query for items
Optionelements.scrollUp:QueryfalseContainer query for trigger elements when scrolling up
Optionelements.scrollDown:QueryfalseContainer query for trigger elements when scrolling down
Optionelements.spaceAdditional:QueryfalseContainer query for additional space when resuming pages
Optionelements.pagination:QueryfalseContainer query for pagination

Match Media

You can add additional options that gets added on match media query. You can use different queries with different and nested options.

SyntaxDefault / ArgumentsDescription
Optionmatches:ObjectfalseAdd additional options on match media query


You can get self object from DOM node on Xtend UI components with Xt.get.

let self = Xt.get({ name: 'xt-infinitescroll', el: document.querySelector('.my-container') })

You can set default options for all components of the same type, with Xt.options.

Xt.options['xt-infinitescroll'] = {
  debug: true,


Listen to events, for listeners use this guideline.

SyntaxDOM ElementDescription
Eventpopulate.xt.infinitescrollcontainerReplace event
Eventinit.xt.infinitescrollcontainerInit or reinit event
Eventstatus.xt.infinitescrollcontainerStatus event (enabled or disabled)
Eventdestroy.xt.infinitescrollcontainerDestroy event


Access properties by getting self object.

let self = Xt.get({ name: 'xt-infinitescroll', el: document.querySelector('.my-container') })
const container = self.container
PropertycomponentName:StringComponent name (used in Xt.get)
Propertyoptions:ObjectFinal options
Propertyinitial:BooleanIf initial or reset activation
Propertydisabled:BooleanIf component disabled
Propertycontainer:NodeContainer node
Propertycurrent:NumberCurrent page
PropertyscrollUp:NodesTrigger elements when scrolling up
PropertyscrollDown:NodesTrigger elements when scrolling down
PropertyitemsContainer:NodeItems container node
PropertyspaceAdditionals:NodeNodes for space additional
Propertypaginations:NodePaginations nodes
Propertyinverse:BooleanIf paginating inverse direction


Call methods by getting self object.

let self = Xt.get({ name: 'xt-infinitescroll', el: document.querySelector('.my-container') })
self = null
Methodself.reinit()Reinit component
Methodself.disable()Disable component
Methodself.enable()Enable component
Methodself.destroy()Destroy component


Style on self.container the classes .xt-infinitescroll-first and .xt-infinitescroll-last for when the infinitescroll is on first or on last page.