在现代Web开发中，无限滚动（Infinite Scroll）已成为提升用户体验的常见模式。传统实现通常依赖滚动事件监听，但这种方法存在性能问题。本文将介绍如何使用Intersection Observer API，仅用1行JavaScript代码实现高性能的无限滚动加载。
传统滚动监听的痛点
传统的无限滚动实现通常需要：
监听
scroll事件计算滚动位置、元素高度等
频繁触发回调导致性能问题
需要手动节流/防抖
这些方法不仅代码量大，而且容易造成性能瓶颈，尤其是在低端设备上。
Intersection Observer API的优势
Intersection Observer API提供了一种更高效的方式：
异步观察目标元素与视口的交叉状态
只在交叉状态变化时触发回调
浏览器原生支持，性能优异
无需复杂计算
1行JS实现代码
/*JavaScript*/
new IntersectionObserver(entries => entries[0].isIntersecting && loadMore()).observe(document.querySelector('.loader'));完整实现示例
<!DOCTYPE html>
<html>
<head>
<title>无限滚动示例</title>
<style>
.item { height: 100px; border: 1px solid #ccc; margin: 10px; padding: 10px; }
.loader { height: 50px; text-align: center; }
</style>
</head>
<body>
<div id="container"></div>
<div class="loader">加载中...</div>
<script>
let count = 0;
function loadMore() {
// 模拟异步加载
setTimeout(() => {
for (let i = 0; i < 10; i++) {
const item = document.createElement('div');
item.className = 'item';
item.textContent = `项目 ${++count}`;
document.getElementById('container').appendChild(item);
}
}, 500);
}
// 核心代码 - 1行实现无限滚动
new IntersectionObserver(entries => entries[0].isIntersecting && loadMore()).observe(document.querySelector('.loader'));
// 初始加载
loadMore();
</script>
</body>
</html>实现原理
创建一个
IntersectionObserver实例观察页面底部的"加载指示器"元素（通常是一个简单的div）
当指示器进入视口时，触发
loadMore()函数loadMore()函数加载新内容并添加到页面底部指示器被新内容推离视口，等待下次进入视口再次触发
示例效果
JS实现无限滚动加载
注意事项
兼容性：虽然现代浏览器都支持IntersectionObserver，但如需支持旧版浏览器，需添加polyfill
错误处理：在实际应用中应添加加载失败的处理逻辑
性能优化：对于大量数据，考虑使用虚拟滚动技术
SEO考虑：无限滚动可能影响SEO，需配合其他技术确保内容可抓取
与传统方法的对比
| 特性 | Intersection Observer | 传统滚动监听 |
|---|---|---|
| 性能 | 高 | 低 |
| 代码复杂度 | 简单 | 复杂 |
| 计算需求 | 无 | 需要 |
| 节流/防抖需求 | 不需要 | 需要 |
| 浏览器支持 | 现代浏览器 | 所有浏览器 |
总结
使用Intersection Observer API实现无限滚动不仅代码简洁优雅，而且性能显著优于传统方法。1行核心代码即可实现基本功能，大大降低了开发复杂度。对于现代Web应用，这无疑是实现无限滚动的最佳选择。