如何实现ReactJS 监听页面滚动事件

发布网友 发布时间：2022-04-23 04:39

我来回答

共3个回答

懂视网 时间：2022-05-12 12:41

需要使用监听页面的滚动事件，折腾了挺久终于实现了，写出来跟大家分享一下。希望有更好的做法也能留言给我，谢谢??

export class Example extends Component{
 scrollHandler = this.handleScroll.bind(this);
 componentDidMount() {
 window.addEventListener('scroll', this.scrollHandler);
 }
 _handleScroll(scrollTop) {
  console.log(scrollTop)  //滚动条距离页面的高度
 }
 }
 handleScroll(event) {
 let scrollTop = event.srcElement.body.scrollTop; 
 this._handleScroll(scrollTop);
 }
}

热心网友 时间：2022-05-12 09:49

实现ReactJS 监听页面滚动事件，代码如下：
export class Example extends Component{ scrollHandler = this.handleScroll.bind(this); componentDidMount() { window.addEventListener('scroll', this.scrollHandler); } _handleScroll(scrollTop) { console.log(scrollTop) //滚动条距离页面的高度 } } handleScroll(event) { let scrollTop = event.srcElement.body.scrollTop; this._handleScroll(scrollTop); }}

热心网友 时间：2022-05-12 11:07

可以require另一个js然后把另一个js的输出赋值给变量。