Native Infinite Scrolling with the IntersectionObserver API

Intersection Observer API: Efficiently monitor DOM element visibility

Intersection Observer API is an emerging client-side JavaScript API for efficiently monitoring the visibility of specified DOM elements, which is useful for features such as lazy loading, infinite scrolling, and ad visibility.

Browser support and polyfill

This API is relatively new and currently has limited browser support, including Chrome Desktop Edition 51, Chrome Android Edition 51, Android WebView 51, Opera 38 and Opera Android Edition 38. However, a polyfill in development is provided on Github, allowing developers to start using Intersection Observers immediately.

Infinite scrolling implementation guide

This article will provide detailed descriptions on how to use the IntersectionObserver API and polyfill to achieve unlimited scrolling user experience mode, including page settings, script creation, and sentinel element management. The guide contains ES6/ES2015 features such as Promise, template strings, and arrow functions.

Core concept: Sentinel element

The core idea of ​​the implementation of infinite scrolling is to use an element at the bottom of the list as a "sentinel", which will trigger more content to be loaded when the browser window approaches the bottom of the page.

Page Settings (HTML)

The page body structure is a simple list:

<ul class="listview"></ul>

To simplify the code, both the initial list items and subsequent pages will be loaded dynamically via JavaScript. We also include polyfill and display the prompt message if the API does not support it:

<div class="polyfill-notice">The polyfill is in use</div>
<🎜>

CSS style is used to set the list view layout and support prompt styles (see the style sheet for details).

Script creation (JavaScript)

First, instantiate a IntersectionObserver object:

sentinelObserver = new IntersectionObserver(sentinelListener, {threshold: 1});

threshold: 1 means that the event listener will be triggered only when the element is completely within the window. Sentinel elements are marked with orange borders during the demonstration.

The

Event Listener will perform operations such as removing the current sentinel, setting a load indicator at the bottom of the list, and using the nextPage method to load the next page. The nextPage method returns a promise indicating when these operations are completed. After that, we can select the new sentinel element and turn off the load indicator:

sentinelListener = function(entries) {
  sentinel.unset();
  listView.classList.add('loading');
  nextPage().then(() => {
    updateSentinel();
    listView.classList.remove('loading');
  });
};

updateSentinelMethod Select the new sentinel and select the first element of the newly loaded page:

updateSentinel = function() {
  sentinel.set(listView.children[listView.children.length - pageSize]);
};

The rest of the code mainly implements the nextPage function. When the Promise returned by loadNextPage() (simulated network request) is resolved, the provided project object will be rendered into HTML and added to the end of the list.

Further reading

More documentation on API and its principles:

• IntersectionObserver’s Coming into View
• Intersection Observers Explained
• MDN – IntersectionObserver API

Intersection Observer API FAQ

(The FAQ section is omitted here because the original text contains a complete and clear answer.)

The above is the detailed content of Native Infinite Scrolling with the IntersectionObserver API. For more information, please follow other related articles on the PHP Chinese website!