带有反应的交叉口观察者 API

Posted 2023-05-08

【中文标题】带有反应的交叉口观察者 API

【英文标题】：Intersection Observer API with react

【发布时间】：2022-01-18 12:21:57

【问题描述】：

我正在尝试在用户使用交叉点观察者 API 滚动的页面上创建导航跟踪器，并且跟踪器显示页面上的哪个部分的反应类似于网站中显示的内容，此链接 https://olaolu.dev/ 带有框滚动（滚动指示器）的变化，我已经创建了一个代码沙箱。任何可以帮助我的人都意义重大。这里一直出错，甚至不知道该怎么办，链接到下面的代码沙箱

https://codesandbox.io/s/tender-oskar-rvbz5?file=/src/App.js

【参考方案1】：

我之前只使用了带有帧运动的 react-intersection-observer，我在我的 h1 中添加了一个 ref，以便观察者知道它是否是 inView。

如果 inView 为真，controls.start 将触发。

import  useInView  from "react-intersection-observer";

const scrollVariant = 
  hidden: 
    opacity: 0,
    x: 0,
    transition: 
      duration: 1,
    ,
  ,
  visible: 
    opacity: 1,
    x: 250,
    transition: 
      duration: 1,
    ,
  ,
;
  
export default function Home() 
  const controls = useAnimation();

  const  ref, inView  = useInView(
    triggerOnce: false,
  );

  React.useEffect(() => 
    if (inView) 
      controls.start("visible");
    
    if (!inView) 
      controls.start("hidden");
    
  , [controls, inView]);

  return (
    <>
        <motion.h1
          variants=scrollVariant
          initial="hidden"
          animate=controls
          ref=ref
        >
    </>
  );