Intersection Observer（IO）是现代前端用来监听元素何时进入/离开另一个元素(通常是视口)的高效 API。比起传统的 scroll 监听和繁重的计算，它性能更好、更简洁。适合懒加载、触发动画、无限滚动、等场景。
1. 示例代码
我把调试代码放出来，方便大家调试
我的作品集 - 练习 Demo
MyPortfolio
关于我
作品
联系我
捕捉光影，定格瞬间
你好，我是一名摄影师和旅行家，欢迎来到我的世界。
查看我的作品
关于我
我热衷于通过镜头探索世界。从城市的喧嚣到山野的静谧，每一个角落都有其独特的故事。我的目标是捕捉那些稍纵即逝的美好，并将它们转化为永恒的画面。我相信，一张好的照片不仅仅是图像，更是情感的载体。
我的作品
山谷
湖畔
雪山
森林
远足
与我联系
如果您对我的作品感兴趣或有合作意向，随时欢迎与我联系。
发送邮件
© 2025 MyPortfolio. 版权所有。/* --- 1. 全局设置 & 变量 --- */
:root {
--primary-color: #3498db; /* 主题色 - 蓝色 */
--secondary-color: #2c3e50; /* 深色 - 用于文本和背景 */
--bg-color: #ffffff; /* 页面背景色 */
--light-bg-color: #f8f9fa; /* 浅灰色背景，用于分隔区域 */
--heading-font: "Playfair Display", serif; /* 标题字体 */
--body-font: "Montserrat", sans-serif; /* 内容字体 */
}
body {
font-family: var(--body-font);
background-color: var(--bg-color);
color: var(--secondary-color);
margin: 0;
line-height: 1.7;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* --- 2. 头部 & 导航 --- */
.main-header {
padding: 15px 0;
position: sticky; /* 粘性定位，滚动时会固定在顶部 */
top: 0;
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px); /* 毛玻璃效果 */
z-index: 100;
border-bottom: 1px solid #eee;
}
.main-header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: var(--heading-font);
font-weight: 700;
font-size: 1.8rem;
}
.main-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 35px; /* 链接之间的间距 */
}
.main-nav a {
text-decoration: none;
color: var(--secondary-color);
font-weight: 700;
position: relative;
padding-bottom: 5px;
}
/* 导航链接的悬停下划线效果 */
.main-nav a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-color);
transition: width 0.3s ease;
}
.main-nav a:hover::after {
width: 100%;
}
/* --- 3. 通用样式 --- */
.section-title {
font-family: var(--heading-font);
font-size: 3rem;
text-align: center;
margin-bottom: 40px;
}
.btn {
display: inline-block;
background-color: var(--primary-color);
color: white;
padding: 15px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}
section {
padding: 100px 0;
}
/* --- 4. 特定 Section 的样式 --- */
/* Hero Section */
.hero {
height: 80vh; /* 占据80%的视口高度 */
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url(https://images.unsplash.com/photo-1473448912268-2022ce9509d8?w=1200);
background-size: cover;
background-position: center;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.hero-title {
font-family: var(--heading-font);
font-size: 4.5rem;
margin: 0;
}
.hero-subtitle {
font-size: 1.2rem;
margin: 20px 0 30px 0;
}
/* About Section */
.about-section {
background-color: var(--light-bg-color);
}
.about-container {
display: flex;
align-items: center;
gap: 60px;
}
.about-image {
width: 40%;
border-radius: 10px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.about-content {
width: 60%;
}
/* Gallery Section */
.gallery-grid {
display: grid;
/* 创建一个响应式的网格，列宽在300px到1fr之间自动调整 */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
grid-auto-rows: 250px; /* 定义网格行高 */
grid-auto-flow: dense; /* 密集打包，自动填充空隙 */
}
.gallery-item {
position: relative;
border-radius: 10px;
overflow: hidden; /* 隐藏超出边界的图片部分 */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
/* 定义跨越多行或多列的特殊项目 */
.tall {
grid-row: span 2;
}
.wide {
grid-column: span 2;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover; /* 保证图片不变形地填满容器 */
transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out;
}
/* 鼠标悬停时，图片放大并变亮 */
.gallery-item:hover img {
transform: scale(1.1);
filter: brightness(1.1);
}
/* 图片上的文字遮罩层 */
.gallery-item .overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
color: white;
font-family: var(--heading-font);
font-size: 1.5rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
transform: translateY(100%); /* 初始状态下隐藏在底部 */
transition: transform 0.4s ease-in-out;
}
.gallery-item:hover .overlay {
transform: translateY(0); /* 悬停时滑入 */
}
/* Contact Section */
.contact-section {
background-color: var(--secondary-color);
color: white;
text-align: center;
}
.contact-section .section-title,
.contact-section p {
color: white;
}
.contact-section .btn {
background-color: white;
color: var(--secondary-color);
}
/* --- 5. 页脚 --- */
.main-footer {
background-color: #1c2833;
color: #aaa;
text-align: center;
padding: 20px 0;
}
@media (max-width: 768px) {
/* 1. 调整通用样式和字体大小 */
.section-title {
font-size: 2.2rem; /* 缩小章节标题 */
}
section {
padding: 60px 0; /* 减小 section 的上下内边距 */
}
/* 2. 头部导航栏调整 */
.main-header .container {
flex-direction: column; /* 让 Logo 和导航垂直排列 */
gap: 15px; /* 增加一点间距 */
}
.main-nav ul {
gap: 20px; /* 减小导航链接之间的间距 */
}
/* 3. Hero 区域字体调整 */
.hero-title {
font-size: 2.8rem; /* 显著缩小主标题 */
}
.hero-subtitle {
font-size: 1rem; /* 缩小副标题 */
}
/* 4. “关于我”区域布局调整 (关键！) */
.about-container {
flex-direction: column; /* 将 flex 容器的方向从横向变为纵向 */
text-align: center; /* 文本居中，看起来更和谐 */
}
.about-image,
.about-content {
width: 100%; /* 让图片和内容都占据100%的宽度 */
}
.about-image {
margin-bottom: 30px; /* 在图片下方增加一些间距 */
}
/* 5. 画廊区域布局调整 */
.gallery-grid {
/*
在手机上，我们让所有项目都只占一列，垂直排列。
grid-auto-rows 设为 auto，让行高自适应图片内容。
*/
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
/*
在手机上，我们取消桌面端特殊的跨行跨列设置，
让所有项目都恢复为标准大小。
*/
.gallery-item.tall,
.gallery-item.wide {
grid-row: auto;
grid-column: auto;
}
.gallery-item {
height: 250px; /* 给所有项目一个统一的高度 */
}
}2. 核心概念(关键名词)
2.1. Observer（观察器）
由 new IntersectionObserver(callback, options) 创建，负责监控一个或多个目标元素。
const options = {};
const observer = new IntersectionObserver(entries => {}, options);- 第一个参数是回调函数，当被观察元素的可见性变化时，此函数会被触发，目标进入屏幕是回调会执行，目标离开屏幕时再次执行，此函数接收条目数组
entries，每个条目，每个条目就是被观察元素的状态更新 - 第二个参数是 options 配置项
2.2. IntersectionObserverEntry（条目）
如果觉得比较复杂可以打印出来看看，假设观察 gallery 容器。
const section = document.querySelector("#gallery");
const options = {};
const observer = new IntersectionObserver(entries => {
console.log(entries);
}, options);
observer.observe(section);开始观察的时候，回调会在页面加载的时候立即触发，当向下滚动到该区域时再次触发，若离开会再次触发，可见性变化的时候回调就会运行，这样就能在元素可见时通过回调函数实现各种逻辑，比如动画。
每个条目都有重要属性：
entry.target：目标元素entry.isIntersecting：布尔，是否相交（是否在屏幕上范围内可见）entry.intersectionRatio：相交面积 / 目标面积（0..1）entry.boundingClientRect：目标的边界盒entry.intersectionRect：相交区域的边界盒entry.rootBounds：root 的边界盒（可能为 null）entry.time：时间戳（相对 performance.timing.navigationStart）
目前主要关注 target(目标属性，即实际观察的元素) 和 isIntersecting(该元素是否在当前屏幕上可见)
只需要在回调函数里面添加或者移除类，就可以实现动画效果
const section = document.querySelector("#gallery");
const options = {};
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
entries[0].target.classList.add("show");
} else {
entries[0].target.classList.remove("show");
}
}, options);
observer.observe(section);#gallery img {
translate: -100%;
opacity: 0;
transition: 800ms ease;
}
#gallery.show img {
translate: 0;
opacity: 1;
}但是现在有一个问题，回调函数在工作区刚露出边缘时就触发了，这意味着动画可能在区域实际可见前就触发了，也就是动画过早开始，但是如果能告诉浏览器等更多内容进入到屏幕后再开始呢，这就需要通过选项对象 options 了。
2.3. options
options 让我们掌控观察器何时触发，下面讲一讲它的三个参数
root：指定可见性的参考容器（默认视口）。rootMargin：调整 root 的判定区域，可提前/延迟触发。（图中绿色和粉色区域为触发区域）
threshold：控制触发时机（元素可见度跨过某个比例时）。
要解决上述问题就需要使用 options 来精细控制，具体来说
- 使用
rootMargin调整触发边界，让元素真正进入屏幕后再触发，而不是刚碰到边缘就执行。 - 结合
threshold设置可见比例（取值范围0 ~ 1），确保只有当区块达到设定的显示比例时，回调才会触发。（比如说到一半(0.5)时，或者完全可见(1)时再出发）
const section = document.querySelector("#gallery");
const options = {
threshold: 0.3,
};
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
entries[0].target.classList.add("show");
} else {
entries[0].target.classList.remove("show");
}
}, options);
observer.observe(section);但现在还有个问题所有图片动画会同时触发，因为监测的是整个区块，一旦发生交集，所有图片都会激活动画，但只想让当前可见的图像产生动画效果，所以不观察整个区块而是单独为每个图片添加观察器
3. 实现无限滚动
无限滚动的实现策略是：通过 Intersection Observer 监视列表中的最后一个元素；当该元素进入预设的观察区域（通常是视口或其扩展区域）时，触发回调以异步加载并追加下一页数据，然后将观察目标动态更新为新的最后一个元素，从而形成一个自动加载的闭环。
Infinite Scrolling Todo List
Infinite scrolling
How to use the Intersection Observer
Todo 1
Todo 2
Todo 3
Todo 4
Todo 5
Todo 6
Todo 7
Todo 8
Todo 9
Todo 10
Todo 11
Todo 12const list = document.querySelector(".todo-list");
const laodMoreTodos = () => {
for (let i = 0; i {
if (entries[0].isIntersecting) {
laodMoreTodos();
observer.unobserve(entries[0].target);
observer.observe(document.querySelector(".todo-item:last-child")); // 重新观察最后一个元素
}
}, {});
const lastItem = list.querySelector(".todo-item:last-child");
observer.observe(lastItem);/* --- 全局样式与重置 --- */
* {
box-sizing: border-box; /* 让布局计算更直观 */
}
body {
margin: 0;
font-family: "Inter", sans-serif; /* 使用引入的现代感字体 */
background-color: #121212; /* 深邃的背景色 */
color: #e0e0e0; /* 柔和的白色文字 */
/* 使用 Flexbox 将 app 容器在页面上垂直和水平居中，方便预览 */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* --- 应用主容器样式 --- */
.app-container {
width: 100%;
max-width: 400px; /* 限制最大宽度，模拟手机屏幕 */
height: 85vh; /* 占据85%的视口高度 */
max-height: 800px; /* 限制最大高度 */
background-color: #1e1e1e; /* 比 body 稍亮的背景色 */
border-radius: 24px; /* 大圆角，现代感十足 */
padding: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); /* 添加深邃的阴影 */
/* 关键！让容器内部内容可滚动 */
display: flex;
flex-direction: column;
overflow-y: auto; /* 当内容超出时，显示垂直滚动条 */
}
/* --- 标题区域样式 --- */
.app-header {
flex-shrink: 0; /* 防止标题区域在 flex 布局中被压缩 */
}
.app-header h1 {
font-size: 2.5rem; /* 大号标题 */
font-weight: 700;
color: #ffffff;
margin: 0 0 10px 0;
}
.app-header .subtitle {
font-size: 1rem;
color: #888; /* 较暗的副标题颜色 */
margin: 0 0 30px 0;
}
/* --- Todo 列表样式 --- */
.todo-list {
display: flex;
flex-direction: column;
gap: 15px; /* 使用 gap 属性优雅地设置项目之间的间距 */
}
/* --- 单个 Todo 项目样式 --- */
.todo-item {
background-color: #2c2c2c; /* Todo 项目的背景色 */
padding: 20px;
border-radius: 16px; /* 较小的圆角 */
font-size: 1rem;
color: #f0f0f0;
/* 添加一个微妙的过渡效果，用于悬停 */
transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}
/* 鼠标悬停时，项目轻微放大，增加交互感 */
.todo-item:hover {
transform: scale(1.03);
background-color: #3a3a3a;
}
/* --- 自定义滚动条样式 (可选，但能提升美感) --- */
.app-container::-webkit-scrollbar {
width: 8px;
}
.app-container::-webkit-scrollbar-track {
background: #1e1e1e; /* 滚动条轨道颜色 */
border-radius: 10px;
}
.app-container::-webkit-scrollbar-thumb {
background-color: #444; /* 滚动条滑块颜色 */
border-radius: 10px;
border: 2px solid #1e1e1e;
}
.app-container::-webkit-scrollbar-thumb:hover {
background-color: #555;
}4. 实现虚拟列表
当 Intersection Observer 的回调函数被触发时，它会告诉我们是哪个 div 的可见性发生了变化。如果进入视口的是 bottom-sentinel，证明用户已经滚动到底部了，那么在底部添加元素同时一处顶部离开的元素，如果进入视口的是 top-sentinel，证明用户已经滚动到顶部了，在顶部添加元素并且移除底部元素
【完整版】Intersection Observer 虚拟列表
body {
font-family: sans-serif;
background: #f0f4f8;
color: #333;
}
.list-container {
height: 90vh;
width: 500px;
margin: 5vh auto;
border: 2px solid #ccc;
border-radius: 10px;
overflow-y: auto; /* 关键：让容器可滚动 */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
/* 为列表内容创建一个包装器，方便计算高度 */
.list-content-wrapper {
position: relative;
}
.list-item {
padding: 20px;
border-bottom: 1px solid #eee;
/* 让每个 item 的高度随机，以展示 IO 的优势 */
min-height: 50px;
}
.list-item:nth-child(even) {
background-color: #fff;
}
/* 看不见，但可以被 IO 观察 */
.sentinel {
height: 1px;
}document.addEventListener("DOMContentLoaded", () => {
const listContainer = document.getElementById("list-container");
const topSentinel = document.getElementById("top-sentinel");
const bottomSentinel = document.getElementById("bottom-sentinel");
// --- 1. 状态与数据模拟 ---
// 模拟一个包含 1000 条数据的巨大数组
const allData = Array.from({length: 1000}, (_, i) => `列表项 #${i + 1}`);
// 每次加载/渲染的项目数量
const batchSize = 20;
// 当前渲染的数据在 allData 中的起始索引
let startIndex = 0;
// 当前渲染的数据在 allData 中的结束索引
let endIndex = 0;
// --- 2. 核心渲染与回收函数 ---
function createItem(text) {
const newItem = document.createElement("div");
newItem.classList.add("list-item");
newItem.textContent = text;
// 模拟不定高
newItem.style.paddingBottom = `${20 + Math.random() * 30}px`;
return newItem;
}
/**
* @description 主渲染函数，负责添加和回收 DOM
* @param {'down' | 'up'} direction - 滚动方向
*/
function renderBatch(direction) {
// --- a. 计算新的数据窗口范围 ---
const newStartIndex =
direction === "down" ? endIndex : Math.max(0, startIndex - batchSize);
const newEndIndex =
direction === "down"
? Math.min(allData.length, startIndex + batchSize * 3) // 渲染三倍可视区域，形成缓冲区
: startIndex;
// 如果已无更多数据，则停止
if (direction === "down" && startIndex >= allData.length) return;
if (direction === "up" && endIndex batchSize * 3) {
for (let i = 0; i batchSize * 3) {
for (let i = allItems.length - 1; i >= batchSize * 3; i--) {
itemsToRemove.push(allItems[i]);
}
}
itemsToRemove.forEach(item => item.remove());
// 更新窗口索引以反映回收
if (direction === "down") {
startIndex = Math.max(0, endIndex - batchSize * 3);
} else {
endIndex = Math.min(allData.length, startIndex + batchSize * 3);
}
}
// --- 3. Intersection Observer 逻辑 ---
const observerCallback = entries => {
entries.forEach(entry => {
if (!entry.isIntersecting) return;
if (entry.target.id === "bottom-sentinel") {
console.log("检测到底部，向下加载...");
renderBatch("down");
}
if (entry.target.id === "top-sentinel") {
console.log("检测到顶部，向上加载...");
renderBatch("up");
}
});
};
const observer = new IntersectionObserver(observerCallback, {
root: listContainer, // 关键！在容器内部进行观察
// 创建一个上下缓冲区，提前加载
rootMargin: "200px 0px 200px 0px",
});
// --- 4. 初始启动 ---
// a. 初始加载第一批数据
renderBatch("down");
// b. 开始观察
observer.observe(topSentinel);
observer.observe(bottomSentinel);
});)
)
)
