我将如何实现这种滚动背景颜色变化效果？

Question

基本上，假设我有 10 个部分。 每个都有不同的颜色分配给它们作为背景颜色。

当用户从第 1 部分向下滚动到第 10 部分时，我希望标签背景颜色相应更改，具体取决于屏幕上的部分。

假设视口的高度是1000px，我想让function找出1000px中的哪个部分当前在800px，所以底部20％，然后在底部20％中找到该部分的背景颜色并将其应用于标签直到用户滚动到下一部分，或者向上滚动并且另一个组件接管背景颜色。

我曾尝试为此使用 IntersectionObservor ，但我认为这不是我想要的最佳方法。

目前，我的设置是，我正在渲染多个组件，每个组件都有一个“data-background = {background}”的数据属性

然后，观察者循环遍历，将它们全部添加到观察者中，并观察以找到屏幕上的哪一个，但它并不能完全满足我的需要。

有没有更简单的方法来实现我正在寻找的东西？

这是我到目前为止的代码

import Page from "../components/common/Page";
import Hero from "../components/molecules/Hero";
import TechStack from "@/components/organisms/TechStack";
import { useEffect } from "react";

const Home = () => {
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          console.log("entry", entry);
          if (entry.isIntersecting) {
            document.body.style.backgroundColor =
              entry.target.dataset.background;
          }
        });
      },

      { threshold: [0.20] }
    );
    // create an array of all the components to be watched
    const components = [...document.querySelectorAll("[data-background]")];
    components.forEach((component) => {
      observer.observe(component);
    });
  }, []);

  return (
    <Page seo={{ title: "Starter Kit" }}>
      <Hero />
      <TechStack background="white"/>
      <TechStack background="grey" />
      <TechStack background="blue"/>
      <TechStack background="green"/>
      <TechStack background="grey"/>
      <TechStack background="white"/>
    </Page>
  );
};

export default Home;

Answer 1

您可以在安装时将元素动态添加到观察者，如下所示

<div ref={(r) => r && observer.observe(r)} />

这是示例： https://codesandbox.io/s/sleepy-margulis-1f7hz7