Description
Infinite scrolling is a technique whereby new content is loaded into the page automatically when the user scrolls near the bottom of the page or section. It's a technique commonly associated with sites like Facebook and Twitter.
Note: Infinite scrolling can present user interface challenges if not used wisely, including not being able to reach links at the bottom of the page. Before choosing to use infinite scrolling, consider the usability impacts it may have. It may be more appropriate to display a button at the bottom of your content inviting a user to load more content manually.
In order to progressively enhance the page, and ensure users with javascript disabled can still access content, infinite scrolling in IPS4 works with the standard pagination markup.
Usage
The infinite scroll widget works by having the content inside of a scroll scope element. The element has a fixed height, and hides its overflow so that it scrolls. The content is placed inside a container element and is an arbitrary length, and as the user scrolls and the end of the container approaches the bottom of the scroll scope, the widget will load more content to display.
A standard pagination control should exist inside the scroll scope element; it can be hidden from javascript-enabled browsers by placing it inside a noscript tag.
Options
scrollScope
(Selector; optional; default 'body')
A selector that idenfities the element which will be the scroll scope; that is, the element that has a fixed height and which the user will scroll to show more content.
container
(Selector; required)
A selector identifying the container element inside which your content should exist.
distance
(Mixed; optional; default 50)
A value that determines how close to the bottom of the scrollScope the container must be to trigger the loading of new content. The value can either be a number (e.g. 50) or a percentage (e.g. 10%) which represents a percentage height of the scrollScope element.
url
(String; required)
The URL that is called to retrieve more content from the server.
pageParam
(String; optional; default 'page')
The parameter used to pass the page value when retrieving more content from the server.
loadingTpl
(Template key; optional; default 'core.infScroll.loading')
The template used to render the 'loading' text when the widget is currently loading new content.
pageBreakTpl
(Template key; optional; default 'core.infScroll.pageBreak')
The template used to render the breaks between each 'page' of content as it is inserted into the container to aid the user experience.
disableIn
(String; optional; default 'phone')
Specifies which responsive views, if any, the infinite scroll behavior is disable in. Value should be one or more registered breakpoint keys (phone, tablet or desktop), comma delimited.
Events emitted by ips.ui.infScroll
infScrollPageLoaded
Triggered when a new page of content has been loaded.
Event data:
-
page
The number of the most current page (i.e. the one just loaded).
Report Guide