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

 

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

你可能感兴趣的:(react,页面滚动,react,scrollTop,组件)