在React项目中使用表格‘无缝滚动’

在react项目中使用表格无缝滚动！以下是一个表格无缝滚动的封装组件

import React from 'react';
import { observer } from 'mobx-react';
import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';
import './index.less';


@observer
class EditableTable extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount = () => {
        //文字无缝滚动
        this.industryNews = setInterval(this.taskIndustryNews, 50);
    }
    taskIndustryNews = () => {
        if (this.refs.newDiv.scrollTop >= this.refs.newDivUI.offsetHeight - this.refs.newDiv.clientHeight) {
            this.refs.newDiv.scrollTop = 0;
        }
        else {
            this.refs.newDiv.scrollTop += 1;
        }
    }


    handleIndustryNewsEnter = () => {
        clearInterval(this.industryNews);
    }
    handleIndustryNewsLeave = () => {
        this.industryNews = setInterval(this.taskIndustryNews, 50);
    }
    componentWillUnmount = () => {
        clearInterval(this.industryNews);
    }


    render() {

        return (
            <div className='ceShiTable'>
                <div className='ceShiTable-title'>
                    <span className='ceShiTable-text2'>12</span>
                    <span className='ceShiTable-text2'>123</span>
                    <span className='ceShiTable-text2'>1234</span>
                    <span className='ceShiTable-text2'>12334</span>
                    <span className='ceShiTable-text2'>12345</span>
                </div>
                <div
                    ref='newDiv'
                    className='ceShiTable-body'
                    onMouseEnter={this.handleIndustryNewsEnter.bind(this)}
                    onMouseLeave={this.handleIndustryNewsLeave.bind(this)}
                >
                    <ul ref='newDivUI'>
                        {this.props.data && this.props.data.length > 0
                            ?
                            this.props.data.map(this.tableBody)
                            : <span className='noData'>暂无数据</span>

                        }

                    </ul>


                </div>
            </div>
        );
    }

    tableBody = (item, index) => {
        return (
            <li key={index}>
                <span className='ceShiTable-text2'>
                    123
                </span>
                <span className='ceShiTable-text2'>
                    123
                </span>
                <span className='ceShiTable-text2'>
                    123
                </span>
                <span className='ceShiTable-text2'>
                    123
                </span>
                <span className='ceShiTable-text2'>
                    123
                </span>

            </li>
        );
    }


}
const EditableFormTable = Form.create()(EditableTable);
export default EditableFormTable;

css样式

.ceShiTable {
    padding: 10px 15px;
    text-align: center;
    font-size: 12px;
    height: 100%;

    .ceShiTable-text2 {
        width: 20%;
        display: inline-block;
    }
    .ceShiTable-title {
        background: rgba(0, 180, 251, 0.5);
        font-weight: bold;
        color: #000;
        span {
            font-size: 12px;
            height: 24px;
            line-height: 24px;
        }
    }
    .ceShiTable-body {
        height: calc(95% - 30px);
        overflow-y: scroll;
        color: #a1b6e5;
        ul {
            padding-inline-start: 0px;

            .noData {
                height: 78px;
                line-height: 78px;
            }
            li {
                background: transparent;
                display: flex;
                align-items: center;
                min-height: 24px;
                span {
                    font-size: 12px;
                }
            }
            li:nth-child(2n) {
                background: rgba(157, 217, 255, 0.1)
            }
            li:hover {
                background: rgba(87, 98, 250, 0.4);
                color: rgba(255, 255, 255, 1);
            }
        }
        &::-webkit-scrollbar {
            width: 3px;
        }
        &::-webkit-scrollbar-thumb {
            // width: 3px;
            background: rgba(0, 180, 251, 0.5);
            border-radius: 7px;
            box-shadow: inset 0 0 15px rgba(0, 180, 251, 1);
        }
    }
}

#效果图