在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 (
            

                

                    12
                    123
                    1234
                    12334
                    12345
                
                

                    

                        {this.props.data && this.props.data.length > 0
                            ?
                            this.props.data.map(this.tableBody)
                            : 暂无数据

                        }

                    


                
            
        );
    }

    tableBody = (item, index) => {
        return (
            

                
                    123
                
                
                    123
                
                
                    123
                
                
                    123
                
                
                    123
                

            
        );
    }


}
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);
        }
    }
}

#效果图