Infinite Scroll

Methods

Methods are actions done by Infinite Scroll instances.

Bạn Đang Xem: Infinite Scroll

With jQuery, methods follow the jQuery UI pattern.

$container.infiniteScroll( ‘methodName’ /*, arguments */ ) let $container = $(‘.container’).infiniteScroll({ /* options… */ }) .infiniteScroll(‘loadNextPage’);

Vanilla JavaScript methods look like:

infScroll.methodName( /* arguments */ )

Unlike jQuery methods, vanilla JS methods cannot be chained together.

// vanilla JS let infScroll = new InfiniteScroll(‘.container’, { // options… }); infScroll.loadNextPage();

loadNextPage

Load the next page.

// jQuery let promise = $container.infiniteScroll(‘loadNextPage’) // vanilla JS let promise = infScroll.loadNextPage()

promise Promise

loadNextPage returns a Promise, allowing you to chain with .then(). The following .then() function is triggered after the page has loaded and after items have been appended.

// vanilla JS infScroll.loadNextPage().then( function( loaded ) { // next page has been loaded let { response, body, items } = loaded; console.log( response.path ); console.log( body ); console.log( items ); } );

response Response response returned from fetch request

body Document, JSON, or String the operative content loaded from the fetch request.

items NodeList appended elements. Requires append

appendItems

Append items to the container.

Xem Thêm : Rela là gì? Hướng dẫn cách gửi về để rela trên Facebook

appendItems will load <script/> within item elements. This is useful for loading embed scripts.

// jQuery $container.infiniteScroll( ‘appendItems’, items ) // vanilla JS infScroll.appendItems( items )

items jQuery object, NodeList, or Array of Elements

Use appendItems to manually append items on load.

let $container = $(‘.container’).infiniteScroll({ append: false, // disable automatic appending }); $container.on( ‘load.infiniteScroll’, function( event, response ) { // get posts from response let $posts = $( response ).find(‘.post’); // append posts after images loaded $posts.imagesLoaded( function() { $container.infiniteScroll( ‘appendItems’, $posts ); }); });

getPath

Get relative URL path for the next page.

// jQuery let path = $container.infiniteScroll(‘getPath’) // vanilla JS let path = infScroll.getPath()

path String

let $container = $(‘.container’).infiniteScroll({ path: ‘page/{{#}}’, // options… }); $container.infiniteScroll(‘getPath’); // => ‘page/2’

getAbsolutePath

Get the absolute URL path for the next page.

// jQuery let path = $container.infiniteScroll(‘getAbsolutePath’) // vanilla JS let path = infScroll.getAbsolutePath()

path String

let $container = $(‘.container’).infiniteScroll({ path: ‘page/{{#}}’, // options… }); // for example URL: https://example.com/section/news/ $container.infiniteScroll(‘getAbsolutePath’); // => ‘/section/news/page/2’

option

Set options after initialization.

// jQuery $container.infiniteScroll( ‘option’, options ) // vanilla JS infScroll.option( options )

options Object

let $container = $(‘.container’).infiniteScroll({ // initial options… // disable loading on scroll loadOnScroll: false, }); // enable loadOnScroll on button click $(‘.view-more-button’).on( ‘click’, function() { $container.infiniteScroll( ‘option’, { loadOnScroll: true, }); });

destroy

Xem Thêm : Phương trình bậc nhất một ẩn và cách giải – Học tốt toán 8 – Toppy.vn

Remove Infinite Scroll functionality completely.

// jQuery $container.infiniteScroll(‘destroy’) // vanilla JS infScroll.destroy()

Utilities

jQuery.fn.data(‘infiniteScroll’)

Get the Infinite Scroll instance from a jQuery object. Infinite Scroll instances are useful to access Infinite Scroll properties.

let infScroll = $(‘.container’).data(‘infiniteScroll’); // access Infinite Scroll properties console.log(`Infinite scroll at page ${infScroll.pageIndex}`);

InfiniteScroll.data()

Get the Infinite Scroll instance via its element. InfiniteScroll.data() is useful for getting the Infinite Scroll instance in JavaScript, after it has been initalized in HTML.

let infScroll = InfiniteScroll.data( element )

element Element or Selector String

infScroll InfiniteScroll Infinite Scroll instance

Properties

pageIndex

The number of the current loaded page. pageIndex increments by 1 on each load.

infScroll.pageIndex // => 1

Infinite Scroll will determine the initial pageIndex on initialization. If path is set to a next link element, Infinite Scroll will determine pageIndex from the link’s href value.

<a class=”pagination__next” href=”/page/4″>Next</a> path: ‘.pagination__next’, // next page is 4, pageIndex = 3

If path is set to a string with {{#}}, Infinite Scroll will determine pageIndex from the window URL.

// URL: https://example.com/blog/9.html path: ‘/blog/{{#}}.html’, // pageIndex = 9

Otherwise, initial pageIndex defaults to 1.

loadCount

The number of pages loaded. loadCount increments by 1 on each load.

infScroll.loadCount // => 0