react中使用js实现页面滚动监听

因为遇到react+ant design是，锚点anchor未生效的BUG，所以想过用js实现anchor效果，会遇到监听页面滚动或监听元素距离页面顶部高度问题，再监听阶段试过很多办法，可能鉴于水平不足，最后找到问题，

element.addEventListener(event, function, useCapture)监听器传入三个参数，查到的很多写的是

cocomponentDidMount() {
    window.addEventListener('scroll', this.HandleScroll)
}
HandleScroll = e => {
    console.log(e.target.scrollTop)
}

但是这个未生效，监听不到页面滚动，是因为没有写第三个参数useCapture（指定事件是否在捕获或冒泡阶段执行），这个值为boolen,即true/false，true - 事件句柄在捕获阶段执行，false- false- 默认。事件句柄在冒泡阶段执行，此时改为

cocomponentDidMount() {
    window.addEventListener('scroll', this.HandleScroll，true)
}
HandleScroll = e => {
    console.log(e.target.scrollTop)
}

此时就可以监听到页面滚动，获取数据了，也可以对指定节点进行监听

cocomponentDidMount() {
    document.getElementsByTagName('main')[0].addEventListener('scroll',                 this.HandleScroll)
    document.getElementById('portArea').addEventListener('scroll',                 this.HandleScroll)
}
HandleScroll = e => {
    console.log(e.target.scrollTop)
}

此时我遇到的问题是，我的结构体为main>div>textarea ，textarea为点击触发display来控制显隐，而display控制显隐是挂载DOM树的，就会出现捕获导致e.target从main转移div上去，scrollTop值重新计数，所以遇到scrollTop值突然归零时可以log一下e.target是否转移了，也可以用

document.getElementById('id').getBoundingClientRect()

来获取滚动高度，getBoundingClientRect()用于获得页面中某个元素相对浏览器视窗的位置，该函数返回一个Object对象，该对象有6个属性top,lef,right,bottom,width,height； 

如有不对或者更好的办法，希望可以留言我改进，谢谢！