与互动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中文网其他相关文章！