页面滚动时动态改变背景颜色-html教程-PHP中文网

页面滚动时动态改变背景颜色

心靈之曲

发布： 2025-08-22 18:26:22

原创

280人浏览过

页面滚动时动态改变背景颜色

本教程旨在指导开发者如何利用 Intersection Observer API，在用户滚动页面时，根据滚动到的特定元素动态改变网页的背景颜色。通过监听目标元素与视口的交叉状态，并结合 CSS 过渡效果，实现平滑的背景颜色切换，从而提升用户体验。

在网页开发中，动态改变背景颜色可以为用户提供更丰富的视觉反馈，增强交互体验。本文将介绍如何使用 Intersection Observer API 监听滚动事件，并根据页面滚动到的不同区域，动态改变网页的背景颜色。

Intersection Observer API 简介

Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况的方法。它允许开发者注册一个回调函数，该函数会在目标元素进入或离开视口时被调用。相比于传统的 scroll 事件监听，Intersection Observer API 性能更高，因为它避免了频繁的回调执行，只有在元素相交状态发生变化时才会触发。

实现步骤

HTML 结构

首先，我们需要定义一些带有 data-color 属性的 div 元素，这些元素将作为背景颜色改变的触发器。

<div class="change" data-color="orange">orange</div>
<div class="change" data-color="blue">blue</div>
<div class="change" data-color="lavender">lavender</div>
<!-- 更多 div 元素 -->

登录后复制

每个 div 元素都具有 change 类，并且 data-color 属性指定了当该元素进入视口时，页面背景应改变成的颜色。

CSS 样式

为了使背景颜色切换更加平滑，我们可以在 body 元素上添加 CSS 过渡效果。同时，我们也可以为 change 类添加一些基本样式，例如最小高度和居中显示。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

body {
  transition: .5s background-color;
}

.change {
  min-height: 100vh;
  background-color: white;
  width: 50%;
  margin: 40px auto;
}

登录后复制

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来使用 Intersection Observer API 监听滚动事件，并改变背景颜色。

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      document.body.style.backgroundColor = entry.target.dataset.color;
    }
  });
};

const changes = document.querySelectorAll('.change');

const observer = new IntersectionObserver(callback, { threshold: .5 });

changes.forEach(change => {
  observer.observe(change);
});

登录后复制

这段代码首先定义了一个回调函数 callback，该函数会在目标元素与视口相交时被调用。在回调函数中，我们通过 entry.isIntersecting 检查目标元素是否进入视口，如果是，则将 document.body.style.backgroundColor 设置为目标元素的 data-color 属性值。

然后，我们使用 document.querySelectorAll('.change') 获取所有带有 change 类的元素，并创建一个 Intersection Observer 实例。在创建实例时，我们传入了回调函数和配置对象 { threshold: .5 }。threshold 选项指定了目标元素与视口相交的比例，当目标元素 50% 进入视口时，回调函数将被触发。

最后，我们遍历所有目标元素，并使用 observer.observe(change) 开始监听每个元素。

代码解释

entry.target.dataset.color: dataset 属性允许我们访问元素的所有 data-* 属性。 entry.target.dataset.color 用于获取当前进入视口的元素的 data-color 属性值。
{ threshold: .5 }: threshold 选项定义了触发回调函数的交叉比例。 0.5 表示目标元素 50% 可见时触发。你可以调整这个值来改变颜色切换的灵敏度。
transition: .5s background-color;: CSS transition 属性实现了背景颜色平滑过渡的效果，避免了颜色突变。