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 开发中,Hooks 提供了一种强大的方式来管理组件的状态和生命周期,然而,不恰当的 Hooks 使用可能会导致组件行为异常、性能问题或难以调试的错误,本文将探讨 React 中常见的不适当 Hooks 使用问题,并提供解决方案,需要的朋友可以参考下2025-03-03
今天带来大家学习react-diagram 序列化Json解读的相关知识，本文通过多种案例给大家分析序列化知识，通过图文并茂的形式给大家介绍的非常详细，感兴趣的朋友一起看看吧2021-05-05
Fiber可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下2022-11-11
React项目执行build命令后,在本地服务器打开页面是空白的,本文主要介绍了React项目build打包页面空白的解决方案,感兴趣的可以了解一下2023-08-08
这篇文章主要为大家详细介绍了React实现pc端的弹出框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
forwardRef和memo是React中用于性能优化和组件复用的两个高阶函数,本文给大家介绍react中的forwardRef 和memo的区别及适用场景,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要为大家介绍了React实现antdM的级联菜单实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
浅谈React的React.FC与React.Component的使用
本文主要介绍了React的React.FC与React.Component的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要给大家介绍了关于React进阶之组件的解耦之道，文中通过详细的示例代码给大家介绍了组件分割与解耦的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-08-08
这篇文章主要介绍了React.js Gird 布局编写键盘组件,Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局2022-09-09
最新评论