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

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`	url get variable to use
Option	`nocache:Boolean`	`false`	Restore scroll position on back and forward browser buttons
Option	`prefetch:Boolean`	`true`	Prefetch next page automatically
Option	`min:Number`	`1`	Initial and minimum page number
Option	`max:Number`	`'Infinity'`	Maximum page number
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.