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这个方法
更能贴近我所想要的效果