React-视窗滚动改变DOM

一开始我想实现一个办法
就是在滑鼠滚动到指定位置时
我指定的区块会浮现出来
滑鼠往上滚时，区块会一起消失

於是此处是一开始的程序

const About=document.getElementsByClassName('about')[0];
const [scroll,setScroll]=useState(
  document.body.offsetTop>About.offsetTop?true:false
);

window.onscroll=()=>{			
  setScroll(
  document.body.offsetTop>About.offsetTop?true:false
);

const scrollFade={opacity:scroll?'1':'0',paddingTop:scroll?'100px':'300px'};

想当然尔
开始出现报错

TypeError: Cannot read properties of undefined (reading 'offsetTop')

(因为我还是个react小白...这边我还是不知道为什麽会报错)

甚至是以为前面的document.body.offsetTop有问题
改为window.scrollY
(後来测试是两种方法都可以用)

於是我把这段的逻辑改成false

const [scroll,setScroll]=useState(false);

让网页一开始读取时
区块是隐藏的
一开始的想法逻辑是
不管我在网页何处重新读取
都会先经过useState的三元判断式先判断
来达成区块是否隐藏的目的
但改为false因为後面的状态改变
一样有达到同样的目的

再来是第二段window.onscroll碰到的问题
在这边我忘了这个方法重复使用的话
前面使用的方法会被覆盖过去
於是後来使用addEventLisener
後来完整的写法为

const [scroll,setScroll]=useState(false);

window.addEventListener('scroll',()=>{
  const About=document.getElementsByClassName('about')[0];
  setScroll(
  window.scrollY>About.getBoundingClientRect().top?true:false
  ); 
});

这边为什麽会使用getBoundingClientRect()这个方法呢?
是因为发现offsetTop会比getBoundingClientRect().top
感应到的距离来的更远
offsetTop必须在指定目标过了视窗才会感应
於是选择使用getBoundingClientRect().top这个方法
更能贴近我所想要的效果