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 Router掌握路由搭建与权限管控的操作方法( 从入门到精通)
本文详细介绍了React Router库在React应用开发中的应用,包括其核心功能、安装使用、基础使用、核心组件和功能、路由参数和嵌套路由、编程式导航以及路由权限管理等方面,感兴趣的朋友一起看看吧2025-01-01
本文全面介绍了在React中处理异步操作的方法、最佳实践及常见坑点,涵盖数据获取、延时任务、用户交互、动画和效果等典型场景,并提供了如useEffect、AbortController、ReactQuery等具体实现示例,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要介绍了React Diff原理的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下2021-04-04
Express+React+Antd实现上传功能(前端和后端)
这篇文章主要介绍了Express+React+Antd实现上传功能(前端和后端),本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了react中Suspense的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合2022-12-12
这篇文章给大家介绍了React使用context进行跨级组件数据传递的方法步骤,文中通过代码示例给大家介绍的非常详细,对大家学习React context组件数据传递有一定的帮助,感兴趣的小伙伴跟着小编一起来学习吧2024-01-01
这篇文章主要为大家介绍了React Native项目设置路径别名实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
React中函数式组件的基本意义是,组件实际上是一个函数,不是类,下面就来给大家介绍一下关于React中函数组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
随着React、Vue等支持组件化的MVVM前端框架越来越流行，在js中直接编写css的技术方案也越来越被大家所接受。为什么前端开发者们更青睐于这些css-in-js的方案呢，下面带你了解它2022-09-09
最新评论