react中使用js實(shí)現(xiàn)頁面滾動監(jiān)聽(推薦)
因?yàn)橛龅絩eact+ant design是，錨點(diǎn)anchor未生效的BUG，所以想過用js實(shí)現(xiàn)anchor效果，會遇到監(jiān)聽頁面滾動或監(jiān)聽元素距離頁面頂部高度問題，再監(jiān)聽階段試過很多辦法，可能鑒于水平不足，最后找到問題，
element.addEventListener(event, function, useCapture)監(jiān)聽器傳入三個參數(shù)，查到的很多寫的是
cocomponentDidMount() {
window.addEventListener('scroll', this.HandleScroll)
}
HandleScroll = e => {
console.log(e.target.scrollTop)
}但是這個未生效，監(jiān)聽不到頁面滾動，是因?yàn)闆]有寫第三個參數(shù)useCapture（指定事件是否在捕獲或冒泡階段執(zhí)行），這個值為boolen,即true/false，true - 事件句柄在捕獲階段執(zhí)行，false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行，此時(shí)改為
cocomponentDidMount() {
window.addEventListener('scroll', this.HandleScroll，true)
}
HandleScroll = e => {
console.log(e.target.scrollTop)
}此時(shí)就可以監(jiān)聽到頁面滾動，獲取數(shù)據(jù)了，也可以對指定節(jié)點(diǎn)進(jìn)行監(jiān)聽
cocomponentDidMount() {
document.getElementsByTagName('main')[0].addEventListener('scroll', this.HandleScroll)
document.getElementById('portArea').addEventListener('scroll', this.HandleScroll)
}
HandleScroll = e => {
console.log(e.target.scrollTop)
}此時(shí)我遇到的問題是，我的結(jié)構(gòu)體為main>div>textarea ，textarea為點(diǎn)擊觸發(fā)display來控制顯隱，而display控制顯隱是掛載DOM樹的，就會出現(xiàn)捕獲導(dǎo)致e.target從main轉(zhuǎn)移div上去，scrollTop值重新計(jì)數(shù)，所以遇到scrollTop值突然歸零時(shí)可以log一下e.target是否轉(zhuǎn)移了，也可以用
document.getElementById('id').getBoundingClientRect()來獲取滾動高度，getBoundingClientRect()用于獲得頁面中某個元素相對瀏覽器視窗的位置，該函數(shù)返回一個Object對象，該對象有6個屬性top,lef,right,bottom,width,height；
到此這篇關(guān)于react中使用js實(shí)現(xiàn)頁面滾動監(jiān)聽的文章就介紹到這了,更多相關(guān)react頁面滾動監(jiān)聽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React?Router掌握路由搭建與權(quán)限管控的操作方法(?從入門到精通)
本文詳細(xì)介紹了React?Router庫在React應(yīng)用開發(fā)中的應(yīng)用,包括其核心功能、安裝使用、基礎(chǔ)使用、核心組件和功能、路由參數(shù)和嵌套路由、編程式導(dǎo)航以及路由權(quán)限管理等方面,感興趣的朋友一起看看吧2025-01-01
本文全面介紹了在React中處理異步操作的方法、最佳實(shí)踐及常見坑點(diǎn),涵蓋數(shù)據(jù)獲取、延時(shí)任務(wù)、用戶交互、動畫和效果等典型場景,并提供了如useEffect、AbortController、ReactQuery等具體實(shí)現(xiàn)示例,感興趣的朋友一起看看吧2025-03-03
這篇文章主要介紹了React Diff原理的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
Express+React+Antd實(shí)現(xiàn)上傳功能(前端和后端)
這篇文章主要介紹了Express+React+Antd實(shí)現(xiàn)上傳功能(前端和后端),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了react中Suspense的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個函數(shù)的組合2022-12-12
React使用context進(jìn)行跨級組件數(shù)據(jù)傳遞
這篇文章給大家介紹了React使用context進(jìn)行跨級組件數(shù)據(jù)傳遞的方法步驟,文中通過代碼示例給大家介紹的非常詳細(xì),對大家學(xué)習(xí)React context組件數(shù)據(jù)傳遞有一定的幫助,感興趣的小伙伴跟著小編一起來學(xué)習(xí)吧2024-01-01
React?Native項(xiàng)目設(shè)置路徑別名示例
這篇文章主要為大家介紹了React?Native項(xiàng)目設(shè)置路徑別名實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
React中函數(shù)式組件的基本意義是,組件實(shí)際上是一個函數(shù),不是類,下面就來給大家介紹一下關(guān)于React中函數(shù)組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
React css-in-js基礎(chǔ)介紹與應(yīng)用
隨著React、Vue等支持組件化的MVVM前端框架越來越流行，在js中直接編寫css的技術(shù)方案也越來越被大家所接受。為什么前端開發(fā)者們更青睞于這些css-in-js的方案呢，下面帶你了解它2022-09-09