react中使用js實(shí)現(xiàn)頁面滾動(dòng)監(jiān)聽(推薦)
因?yàn)橛龅絩eact+ant design是，錨點(diǎn)anchor未生效的BUG，所以想過用js實(shí)現(xiàn)anchor效果，會(huì)遇到監(jiān)聽頁面滾動(dòng)或監(jiān)聽元素距離頁面頂部高度問題，再監(jiān)聽階段試過很多辦法，可能鑒于水平不足，最后找到問題，
element.addEventListener(event, function, useCapture)監(jiān)聽器傳入三個(gè)參數(shù)，查到的很多寫的是
cocomponentDidMount() {
window.addEventListener('scroll', this.HandleScroll)
}
HandleScroll = e => {
console.log(e.target.scrollTop)
}但是這個(gè)未生效，監(jiān)聽不到頁面滾動(dòng)，是因?yàn)闆]有寫第三個(gè)參數(shù)useCapture（指定事件是否在捕獲或冒泡階段執(zhí)行），這個(gè)值為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)聽到頁面滾動(dòng)，獲取數(shù)據(jù)了，也可以對(duì)指定節(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樹的，就會(huì)出現(xiàn)捕獲導(dǎo)致e.target從main轉(zhuǎn)移div上去，scrollTop值重新計(jì)數(shù)，所以遇到scrollTop值突然歸零時(shí)可以log一下e.target是否轉(zhuǎn)移了，也可以用
document.getElementById('id').getBoundingClientRect()來獲取滾動(dòng)高度，getBoundingClientRect()用于獲得頁面中某個(gè)元素相對(duì)瀏覽器視窗的位置，該函數(shù)返回一個(gè)Object對(duì)象，該對(duì)象有6個(gè)屬性top,lef,right,bottom,width,height；
到此這篇關(guān)于react中使用js實(shí)現(xiàn)頁面滾動(dòng)監(jiān)聽的文章就介紹到這了,更多相關(guān)react頁面滾動(dòng)監(jiān)聽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React中不適當(dāng)?shù)腍ooks使用問題及解決方案
在 React 開發(fā)中,Hooks 提供了一種強(qiáng)大的方式來管理組件的狀態(tài)和生命周期,然而,不恰當(dāng)?shù)?nbsp;Hooks 使用可能會(huì)導(dǎo)致組件行為異常、性能問題或難以調(diào)試的錯(cuò)誤,本文將探討 React 中常見的不適當(dāng) Hooks 使用問題,并提供解決方案,需要的朋友可以參考下2025-03-03
今天帶來大家學(xué)習(xí)react-diagram 序列化Json解讀的相關(guān)知識(shí)，本文通過多種案例給大家分析序列化知識(shí)，通過圖文并茂的形式給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2021-05-05
Fiber可以理解為一個(gè)執(zhí)行單元，每次執(zhí)行完一個(gè)執(zhí)行單元，React Fiber就會(huì)檢查還剩多少時(shí)間，如果沒有時(shí)間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React Fiber架構(gòu)原理剖析,需要的朋友可以參考下2022-11-11
React項(xiàng)目build打包頁面空白的解決方案
React項(xiàng)目執(zhí)行build命令后,在本地服務(wù)器打開頁面是空白的,本文主要介紹了React項(xiàng)目build打包頁面空白的解決方案,感興趣的可以了解一下2023-08-08
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)pc端的彈出框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
react中的forwardRef 和memo的區(qū)別解析
forwardRef和memo是React中用于性能優(yōu)化和組件復(fù)用的兩個(gè)高階函數(shù),本文給大家介紹react中的forwardRef 和memo的區(qū)別及適用場景,感興趣的朋友跟隨小編一起看看吧2023-10-10
React實(shí)現(xiàn)antdM的級(jí)聯(lián)菜單實(shí)例
這篇文章主要為大家介紹了React實(shí)現(xiàn)antdM的級(jí)聯(lián)菜單實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
淺談React的React.FC與React.Component的使用
本文主要介紹了React的React.FC與React.Component的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
React進(jìn)階學(xué)習(xí)之組件的解耦之道
這篇文章主要給大家介紹了關(guān)于React進(jìn)階之組件的解耦之道，文中通過詳細(xì)的示例代碼給大家介紹了組件分割與解耦的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
這篇文章主要介紹了React.js?Gird?布局編寫鍵盤組件,Grid?布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局2022-09-09