InfiniteScroll
Scroll

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

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

	Syntax	Default / Arguments	Description
Option	`debug:Boolean`	`false`	Debug on console
Option	`get:String\|false`	`false`	url get variable to use
Option	`nocache:Boolean`	`true`	Restore scroll position on back and forward browser buttons
Option	`prefetch:Boolean`	`true`	Prefetch next page automatically
Option	`min:Number`	`1`	Initial and minimum items / page number
Option	`max:Number`	`'Infinity'`	Maximum items / page number
Option	`perPage:Number`	`1`	Items / pages per pagination
Option	`events.scrollUp:Boolean`	`false`	Automatically activate on scroll up
Option	`events.scrollDown:Boolean`	`false`	Automatically activate on scroll down
Option	`events.on:String\|false`	`'click'`	List of space separated events to trigger infinite scroll
Option	`elements.itemsContainer:Query`	`false`	Container query for items container
Option	`elements.item:Query`	`false`	Items container query for items
Option	`elements.scrollUp:Query`	`false`	Container query for trigger elements when scrolling up
Option	`elements.scrollDown:Query`	`false`	Container query for trigger elements when scrolling down
Option	`elements.spaceAdditional:Query`	`false`	Container query for additional space when resuming pages
Option	`elements.pagination:Query`	`false`	Container 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.

	Syntax	Default / Arguments	Description
Option	`matches:Object`	`false`	Add 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.

	Syntax	DOM Element	Description
Event	`populate.xt.infinitescroll`	`container`	Replace event
Event	`init.xt.infinitescroll`	`container`	Init or reinit event
Event	`status.xt.infinitescroll`	`container`	Status event (enabled or disabled)
Event	`destroy.xt.infinitescroll`	`container`	Destroy event

Properties

Access properties by getting self object.

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

	Syntax	Description
Property	`componentName:String`	Component name (used in `Xt.get`)
Property	`options:Object`	Final options
Property	`initial:Boolean`	If initial or reset activation
Property	`disabled:Boolean`	If component disabled
Property	`container:Node`	Container node
Property	`current:Number`	Current page
Property	`scrollUp:Nodes`	Trigger elements when scrolling up
Property	`scrollDown:Nodes`	Trigger elements when scrolling down
Property	`itemsContainer:Node`	Items container node
Property	`spaceAdditionals:Node`	Nodes for space additional
Property	`paginations:Node`	Paginations nodes
Property	`inverse:Boolean`	If 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

	Syntax	Description
Method	`self.reinit()`	Reinit component
Method	`self.disable()`	Disable component
Method	`self.enable()`	Enable component
Method	`self.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.