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页面滚动监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
React中使用Echarts无法显示title、tooltip等组件的解决方案
这篇文章主要介绍了React中使用Echarts无法显示title、tooltip等组件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03详解如何给React-Router添加路由页面切换时的过渡动画
这篇文章主要介绍了详解如何给React-Router添加路由页面切换时的过渡动画,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-04-04
最新评论