react 中ant design table 表格组件滚动条监听方法

最新推荐文章于 2024-03-19 18:01:49 发布

VIP文章山里的猿人

最新推荐文章于 2024-03-19 18:01:49 发布

阅读量3.4k

点赞数

分类专栏： ant design 问题文章标签： react javascript 前端 reactjs react.js

本文链接：https://blog.csdn.net/mrluog/article/details/121837804

版权

react 中ant design table 表格组件滚动条监听方法

1、包的版本提示## 标题

 "react": "^16.8.6"
  "react-dom": "^16.8.6"
  "antd": "^3.19.5"

2、先上代码

import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import { Table } from 'antd';
import { debounce } from '@/utils/tools';

class BranchCompanyPage extends PureComponent {
      onScrollHandle = () => {
        const table = ReactDOM.findDOMNode(this.table);
        // 获取表格dom元素
        const tableBody = table.querySelector('.ant-table-body');
        // 容器可视区高度
        const tableBodyHeight = tableBody.clientHeight;
        // 内容高度
        const contentHeight = tableBody.scrollHeight;
        // 距离顶部的高度
        const toTopHeight = tableBody.scrollTop;