React 使用addEventListener监听浏览器窗口大小、浏览器滚动条滚动


componentDidMount() {

// 监听滚动 window.addEventListener('scroll', this.handleScroll)

// 监听窗口大小改变 window.addEventListener('resize', this.handleResize)

}

componentWillUnmount() {

// 一定要最后移除监听器,以防多个组件之间导致this的指向紊乱

window.removeEventListener('scroll', this.handleScroll)

window.removeEventListener('resize', this.handleResize)

}

handleScroll = e =>{

console.log( '浏览器滚动事件', e.srcElement.scrollingElement.scrollTop,

// 距离滚动条顶部高度 e.srcElement.scrollingElement.scrollHeight,

// 整个文档高度 )

}

handleResize = e => {

console.log('浏览器窗口大小改变事件', e.target.innerWidth)

}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM