基于react封装监听页面滚动组件

前段时间做了一个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 (
            

        )
    }
    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浏览器就没有测试）

 

以上就是我在项目中所做的监听页面滚动组件的封装了，不足之处，还望留言说明与探讨，我定完善～