與互動OBServer API的本地無限滾動

Intersection Observer API：高效監控DOM元素可見性

Intersection Observer API是一個新興的客戶端JavaScript API，用於高效監控指定DOM元素的可見性，這對於延遲加載、無限滾動和廣告可見性等功能非常有用。

瀏覽器支持及polyfill

該API相對較新，目前瀏覽器支持有限，包括Chrome桌面版51、Chrome安卓版51、安卓WebView 51、Opera 38和Opera安卓版38。然而，Github上提供了一個正在開發中的polyfill，允許開發者立即開始使用Intersection Observers。

無限滾動實現指南

本文將詳細介紹如何使用IntersectionObserver API和polyfill實現無限滾動的用戶體驗模式，包括頁面設置、腳本創建和哨兵元素管理。指南中包含了ES6/ES2015特性，如Promise、模板字符串和箭頭函數。

核心概念：哨兵元素

無限滾動實現的核心思想是使用列表底部的一個元素作為“哨兵”，當瀏覽器視窗接近頁面底部時，該哨兵元素將觸發加載更多內容。

頁面設置 (HTML)

頁面主體結構是一個簡單的列表：

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

為了簡化代碼，初始列表項和後續頁面都將通過JavaScript動態加載。 我們還包含了polyfill，並在API不支持的情況下顯示提示信息：

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

CSS樣式用於設置列表視圖佈局和支持提示樣式（詳情請參考樣式表）。

腳本創建 (JavaScript)

首先，實例化一個IntersectionObserver對象：

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

threshold: 1表示只有當元素完全在視窗內時才觸發事件監聽器。哨兵元素在演示中用橙色邊框標識。

事件監聽器將執行移除當前哨兵、在列表底部設置加載指示器以及使用nextPage方法加載下一頁的操作。 nextPage方法返回一個Promise，表示這些操作何時完成。之後，我們可以選擇新的哨兵元素並關閉加載指示器：

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

updateSentinel方法選擇新的哨兵，選擇新加載頁面的第一個元素：

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

其餘代碼主要實現nextPage函數。當loadNextPage()（模擬網絡請求）返回的Promise被resolve時，提供的項目對象將被渲染成HTML並添加到列表末尾。

進一步閱讀

更多關於API及其原理的文檔：

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

Intersection Observer API 常見問題解答

(此處省略常見問題解答部分，因為原文已包含完整且清晰的解答。)

以上是與互動OBServer API的本地無限滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章！