使用 IntersectionObserver 实现滚动时动态改变背景颜色-html教程-PHP中文网

使用 IntersectionObserver 实现滚动时动态改变背景颜色

霞舞

发布： 2025-08-22 17:44:33

原创

1024人浏览过

使用 intersectionobserver 实现滚动时动态改变背景颜色

本文将介绍如何使用 IntersectionObserver API 在网页滚动时动态改变背景颜色。通过监听特定元素是否进入视口，并结合 CSS 过渡效果，可以实现平滑的背景颜色切换，为用户带来更丰富的视觉体验。我们将提供完整的代码示例，并解释关键步骤，帮助你轻松实现这一功能。

实现原理

IntersectionObserver API 允许你异步地监听目标元素与其祖先元素或 viewport 的交叉状态。当目标元素进入或离开视口时，会触发回调函数。我们可以利用这个特性，在特定元素进入视口时，改变 document.body 的 backgroundColor 属性。

具体步骤

HTML 结构:

首先，需要在 HTML 中定义一些带有 data-color 属性的 div 元素。data-color 属性用于存储该元素对应的背景颜色。同时，为这些元素添加 change 类，方便后续的 JavaScript 代码选取。
```
<div class="change" data-color="orange">orange</div>
<div class="change" data-color="blue">blue</div>
<div class="change" data-color="lavender">lavender</div>

```
登录后复制
为了演示效果，添加了多个具有不同 data-color 属性的 div 元素。你也可以根据实际需求调整元素的数量和颜色。
CSS 样式:

ViiTor实时翻译
AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

为了使背景颜色切换更平滑，可以为 body 元素添加 CSS 过渡效果。同时，为 change 类添加一些基本样式，例如最小高度、背景颜色、宽度和外边距。
```
body {
  transition: .5s background-color;
}

.change {
  min-height: 100vh;
  background-color: white;
  width: 50%;
  margin: 40px auto;
}
```
登录后复制
transition: .5s background-color; 定义了 background-color 属性变化的过渡效果，持续时间为 0.5 秒。min-height: 100vh; 确保每个 div 元素至少占据整个视口的高度。
JavaScript 代码:

使用 JavaScript 代码创建 IntersectionObserver 实例，并监听 change 类的元素。当元素进入视口时，将 document.body 的 backgroundColor 属性设置为该元素的 data-color 属性值。
```
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 属性表示元素是否与视口相交。entry.target.dataset.color 用于获取元素的 data-color 属性值。
- document.querySelectorAll('.change')：选取所有 change 类的元素。
- new IntersectionObserver(callback, { threshold: .5 })：创建一个 IntersectionObserver 实例。threshold: .5 表示当元素 50% 进入视口时触发回调函数。
- observer.observe(change)：监听每个 change 类的元素。

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>滚动时改变背景颜色</title>
  <style>
    body {
      transition: .5s background-color;
    }

    .change {
      min-height: 100vh;
      background-color: white;
      width: 50%;
      margin: 40px auto;
    }
  </style>
</head>
<body>

  <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 class="change" data-color="orange">orange</div>
  <div class="change" data-color="blue">blue</div>
  <div class="change" data-color="lavender">lavender</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 class="change" data-color="orange">orange</div>
  <div class="change" data-color="blue">blue</div>
  <div class="change" data-color="lavender">lavender</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 class="change" data-color="orange">orange</div>
  <div class="change" data-color="blue">blue</div>
  <div class="change" data-color="lavender">lavender</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 class="change" data-color="orange">orange</div>
  <div class="change" data-color="blue">blue</div>
  <div class="change" data-color="lavender">lavender</div>

  <script>
    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);
    });
  </script>

</body>
</html>

登录后复制

注意事项

兼容性: IntersectionObserver API 在现代浏览器中得到广泛支持。但为了兼容旧版本浏览器，可以使用 polyfill。
性能: IntersectionObserver API 采用异步方式监听，不会阻塞主线程，因此对性能影响较小。
阈值 (threshold): threshold 选项可以控制元素进入视口的百分比，从而调整背景颜色切换的时机。可以根据实际需求调整该值。
目标元素选择: 确保正确选择需要监听的目标元素。可以使用 CSS 选择器灵活地选取元素。

总结

通过使用 IntersectionObserver API，可以轻松实现滚动时动态改变背景颜色的效果。这种方法不仅性能良好，而且易于理解和实现。你可以根据本文提供的代码示例和步骤，将其应用到你的项目中，为用户带来更丰富的视觉体验。还可以扩展此方法，实现更复杂的效果，例如在元素进入视口时播放动画、加载图片等。

以上就是使用 IntersectionObserver 实现滚动时动态改变背景颜色的详细内容，更多请关注php中文网其它相关文章！