基于react的横向滚动组件（可用于antd-table横向滚动）

效果：

代码：

/*
 * 横向滚动容器
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';

class horizontally extends Component {

    static propTypes = {
        targetStr: PropTypes.string,//目标元素的类名（本页面类名唯一）
        disabled: PropTypes.bool,//滚动是否生效
        step: PropTypes.number,//每次滚动差值
    }

    static defaultProps = {
        targetStr: "ant-table-body",
        disabled: false,
        step: 100
    }

    constructor(props) {
        super(props);
        this.state = {
            ifScroll: false
        };
    }

    handleMouseEnter = () => {
        let { disabled } = this.props;
        if (disabled) return;
        this.setState({
            ifScroll: true
        }, () => {
            this.handleContentScroll();
        });
    }

    handleMouseLeave = () => {
        let { disabled } = this.props;
        if (disabled) return;
        this.setState({
            ifScroll: false
        }, () => {
            this.handleContentScroll();
        });
    }

    handleContentScroll = () => {
        //是否启用表格滚动
        if (this.state.ifScroll) {
            if (window.addEventListener) {
                window.addEventListener('mousewheel', this.wheel, { passive: false })
                window.addEventListener('DOMMouseScroll', this.wheel, { passive: false })
            }
            else window.onmousewheel = document.onmousewheel = this.wheel;
        } else {
            if (window.removeEventListener) {
                window.removeEventListener('mousewheel', this.wheel, { passive: false })
                window.removeEventListener('DOMMouseScroll', this.wheel, { passive: false             })
            }
            else window.onmousewheel = document.onmousewheel = this.wheel;
        }
    }

    wheel = (event) => {
        let targetStr = this.props.targetStr;
        let step = this.props.step;
        let target = document.getElementsByClassName(targetStr)[0];
        let clientWitdh = target.clientWidth, scrollWidth = target.scrollWidth;
        //判断是否符合滚动条件
        if(scrollWidth <= clientWitdh || disabled) {
            return ;
        }
        //阻止页面滚动条滚动
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            window.event.returnValue == false;
        }
        let delta = 0;
        if (!event) event = window.event;
        if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
            delta = event.wheelDelta / 120;
            if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
        } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
            delta = -event.detail / 3;
        }
        if (delta) {
            if (delta < 0) {//向下滚动
                target.scrollLeft = target?.scrollLeft ? (target?.scrollLeft + step) : step;
            } else {//向上滚动
                target.scrollLeft = target?.scrollLeft ? (target?.scrollLeft - step) : 0;
            }
        }
    }

    render() {
        return (
            <div style={{ ...this.props.style }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
                {this.props.children}
            </div>
        );
    }
}

export default horizontally;

使用：

// 如果表格中有弹框之类的，可以通过设置disabled来控制全局/table滚动
 return (
      <HScrollContainer disabled={tableScrollDisabled} style={{ background: '#fff', padding: 20 }}>
        <Table
          rowKey={'id'}
          bordered={true}
          dataSource={game_list}
          columns={operationColumn}
          loading={loading}
          pagination={{
            pageSize,
            total: game_total,
            current: game_page,
          }}
          rowSelection={rowSelection}
          scroll={{ x: 2000 }}
          onChange={this.handlePageChange}
        />
        <AllCompetitionModal
          ref={node => {
            this.allCompetitionModal = node;
          }}
        />
      </HScrollContainer>
    );

作用：

可以当作横向滚动容器，作者目前用于antd Table中鼠标移入表格横向滚动。

可能没有做很好的兼容处理，目前火狐，谷歌，safari亲测没有问题。