css 返回视口中组件的ID

9udxz4iz 于 2023-02-17 发布在其他

关注(0)|答案(1)|浏览(82)

我想返回当前在viewport中的组件的值。
为了做到这一点，我参考了一些文档，并认为我可以通过使用 * Ant Design *。
我引用的 * Ant Design * 函数是 * Anchor *。我想获取Anchor标记的 * key * 值。
有一个document解释了它的用法，但不知道如何使用它来获取当前组件的值。
我在我的代码中做了三个组件，并希望在顶部显示它们的编号。
我能知道怎么做吗？
很抱歉这个问题很难理解，但我相信如果你看到我的代码或下面的CodeSandBox，你会理解得更好。谢谢

- 代码：**

import styled from "styled-components";
import { Anchor } from "antd";
import { useState } from "react";

export default function App() {

  //tried to use these, but failed
  const [currentView, setCurrentView] = useState();
  console.log(currentView);
  window.addEventListener("scroll", () => {});

  return (
    <Wrap>
      <Anchor
        targetOffset={currentView}
        style={{ display: "none" }}
        items={[
          {
            key: "part-1",
            href: "#part-1",
            title: "Part 1"
          },
          {
            key: "part-2",
            href: "#part-2",
            title: "Part 2"
          },
          {
            key: "part-3",
            href: "#part-3",
            title: "Part 3"
          }
        ]}
      />
      <div className="fixed">currentcomponent : {currentView}</div>
      <div>{currentView}</div>
      <div id="part-1" className="compo1">
        components 1
      </div>
      <div id="part-2" className="compo2">
        components 2
      </div>
      <div id="part-3" className="compo3">
        components 3
      </div>
    </Wrap>
  );
}

const Wrap = styled.div`
  border: 3px solid black;
  width: 100vw;
  box-sizing: border-box;

  .fixed {
    position: sticky;
    top: 0;
  }

  .compo1 {
    border: 3px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 70vh;
  }

  .compo2 {
    border: 3px solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 70vh;
  }

  .compo3 {
    border: 3px solid green;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 70vh;
  }
`;

- 代码沙盒：**CodeSandBox

css

来源：https://stackoverflow.com/questions/75468925/returning-the-id-of-the-component-which-is-in-viewport

1条答案

按热度按时间

hi3rlvi21#

您可以使用Intersection Observer API来观察viewport中的组件，您可以在useEffect钩子中添加观察器，而无需依赖关系，以便仅在组件初始加载时运行。

import styled from "styled-components";
import { Anchor } from "antd";
import { useState, useEffect } from "react";

export default function App() {
  const [currentView, setCurrentView] = useState();
  window.addEventListener("scroll", () => {});

  useEffect(() => {
    const components = document.querySelectorAll(".comp");
    const componentObserver = new IntersectionObserver(function (
      entries,
      observer
    ) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          setCurrentView(entry.target.id);
        }
      });
    });
    components.forEach((comp) => {
      componentObserver.observe(comp);
    });
  }, []);

  return (
    <Wrap>
      <Anchor
        targetOffset={currentView}
        style={{ display: "none" }}
        items={[
          {
            key: "part-1",
            href: "#part-1",
            title: "Part 1"
          },
          {
            key: "part-2",
            href: "#part-2",
            title: "Part 2"
          },
          {
            key: "part-3",
            href: "#part-3",
            title: "Part 3"
          }
        ]}
      />
      <div className="fixed">currentcomponent : {currentView}</div>
      <div>{currentView}</div>
      <div id="part-1" className="compo1 comp">
        components 1
      </div>
      <div id="part-2" className="compo2 comp">
        components 2
      </div>
      <div id="part-3" className="compo3 comp">
        components 3
      </div>
    </Wrap>
  );
}

const Wrap = styled.div`
  border: 3px solid black;
  width: 100vw;
  box-sizing: border-box;

  .fixed {
    position: sticky;
    top: 0;
  }

  .compo1 {
    border: 3px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }

  .compo2 {
    border: 3px solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }

  .compo3 {
    border: 3px solid green;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }
`;

赞(0）回复(0）举报 2023-02-17

我来回答

css 返回视口中组件的ID

1条答案

相关问题

热门标签

最新问答