InfiniteScroll
Other

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

Javascript

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 */}).

Usage

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 uses bfcache to resume previous state when using back/forward browser buttons. Ensure bfcache is working on your environment (some extensions can disable this), or use options.nocache: true.

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.

Options

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:Stringfalseurl get variable to use
Optionnocache:BooleanfalseRestore scroll position on back and forward browser buttons
Optionmin:Number1Initial and minimum page number
Optionmax:Number'Infinity'Maximum page number
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

Util

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

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

Properties

Access properties by getting self object.

let self = Xt.get({ name: 'xt-infinitescroll', el: document.querySelector('.my-container') })
const container = self.container
SyntaxDescription
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

Methods

Call methods by getting self object.

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

Other

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