前段时间做了一个react的pc项目,因为业务需要做监听页面滚动操作,在网上找了一些方法都不太理想,干脆直接自己动手丰衣足食了,代码如下:
/**
* 文档作者: Beamon__
* 描述信息:公共组件-监听页面滚动触发回调
* props:
* num:{number} 设置的触底限制高度,默认值为0
* scrollCallback:{function} 满足页面滚动到底的回调
*/
import * as React from 'react';
export default class ListenScroll extends React.Component {
constructor(props) {
super(props);
this.state = {
codeType:true, // 声明回调执行开关
}
this.bindScroll = this.bindScroll.bind(this);
}
componentDidMount() {
// 挂载页面滚动监听
window.addEventListener('scroll', this.bindScroll)
}
componentWillUnmount() {
// 移除页面滚动监听
window.removeEventListener('scroll', this.bindScroll.bind(this));
}
render() {
return (
<div />
)
}
bindScroll(event) {
// 滚动的高度
const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false) || window.pageYOffset || (event.srcElement ? event.srcElement.body.scrollTop : 0);
// 视窗高度
const clientHeight = (event.srcElement && event.srcElement.documentElement.clientHeight) || document.body.clientHeight;
// 页面高度
const scrollHeight = (event.srcElement && event.srcElement.documentElement.scrollHeight) || document.body.scrollHeight;
// 距离页面底部的高度
const height = scrollHeight - scrollTop - clientHeight;
// 判断距离页面底部的高度
if (height <= (this.props.num || 0)) {
// 判断执行回调条件
if (this.state.codeType) {
// 执行回调
this.props.scrollCallback();
// 关闭判断执行开关
this.setState(
{
codeType: false,
}
);
}
} else {
// 打开判断执行开关
this.setState({
codeType: true
});
}
}
}
使用方法:
1.在需要添加监听滚动的页面引入该组件;
2.组件添加num属性,必填项,属性值为number,设置触发滚动回调执行的高度,即页面距离底部还有多高执行回调函数;
3.添加scrollCallback属性,必填项,属性值为function,设置满足页面滚动时触发条件所执行的回调函数;
ps:经过测试,该组件兼容当前所有主流浏览器及ie9等低版本ie浏览器(我们项目兼容到ie9,再低版本的ie浏览器就没有测试)
以上就是我在项目中所做的监听页面滚动组件的封装了,不足之处,还望留言说明与探讨,我定完善~