添加滚动监听事件
componentDidMount(){
//三种方式添加滚动时间监听 任写其一即可
// getElementById id 为div中定义的id = 'xxx' 中的 xxx
document.getElementById(`${id}`).addEventListener('scroll', this.scrollPage);
// querySelector id 为div中定义的id = 'xxx' 中的 xxx 使用querySelector 并使用id查询时需添加前缀"#"
document.querySelector(`#${id}`).addEventListener('scroll', this.scrollPage);
// querySelector className为div中定义的className= 'xxx' 中的 xxx 使用querySelector 并使用id查询时需添加前缀"."
document.querySelector(`.${className}`).addEventListener('scroll', this.scrollPage)
}
componentWillUnmount(){
//组件销毁时 去除监听事件 减耗
document.getElementById(`${this.props.param.__id}`).removeEventListener('scroll', this.scrollPage)
}
scrollPage = ()=>{
const element = document.getElementById(`${targetId}`);
let top = element.getBoundingClientRect()&&element.getBoundingClientRect().top
console.log("我滚了,现距离上级顶部 高度为"+top)
}
tips
同理 可添加其他类型的事件 如点击等
