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； 

到此这篇关于react中使用js实现页面滚动监听的文章就介绍到这了,更多相关react页面滚动监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！