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及其原理的文檔：
Intersection Observer API 常見問題解答
(此處省略常見問題解答部分，因為原文已包含完整且清晰的解答。)
以上是與互動OBServer API的本地無限滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
