react+antd+css animation实现表格滚动并解决不生效问题

今天的需求是做一个表头固定，数据自动滚动的表格，目前使用了animation，但是遇到一些问题，记录一下。

 componentDidMount() {
        // 滚动  （在数据请求回来后再计算高度，否则计算不准确）
          this.carousel = document.querySelector(".ant-carousel")
      this.carousel.style.overflow = "hidden"
      this.carouselBody = document.querySelector(".Descriptions")
      const carouselh = this.carousel.clientHeight
      const carouselBodyh = this.carouselBody.scrollHeight
      this.carouselBodyDiff = carouselBodyh - carouselh
      console.log(this.carousel, this.carouselBody, carouselh, carouselBodyh, this.carouselBodyDiff)
      if (this.carouselBodyDiff > 0) {
        this.styleIndex2 = document.styleSheets[0]
          .insertRule(`@keyframes r{
        0%{
          top:0;
        }
        100%{
          top:-${this.carouselBodyDiff}px;
        }
      }`);
        this.carouselBody.style.animation = "r 10s linear 1s infinite ";
        this.carouselBody.style.position = "relative"
      }
        }

    }
    render() {
        const ProjectInfo = this.props.ProjectInfo
        const data = [];
      ProjectInfo.map((i, index) => {
            data.push({
                key: i.id,
                deptName: i.Name,
                projectName: i.proName,
                level: i.le,
                delayDays: i.day
            });
        })
        return (
            <div style={{ height: "100%" }} className='box'> <Table
                columns={columns}
                dataSource={data}
                pagination={false}
                scroll={{
                    y: this.state.y,
                }}
            /></div>

        )
    }
}

this.carouselBody.style.position = “relative”
关键点就在这，一定要确定position = “relative”，否则不生效