Antd table滚动高度动态获取自定义hooks useScrollY

import { useLayoutEffect, useState } from 'react'

export default function useScrollY(id = '') {
    const [scrollY, setScrollY] = useState('')
    const className = id ? `#${id} .ant-table-thead` : `.ant-table-thead`
    useLayoutEffect(() => {
        // 获取表格头元素
        const ele = document.querySelector(`${className}`)
        if (ele) {
            // 获取表格头元素的上边框相对浏览器视窗的位置最顶部的距离(元素上边到视窗上边的距离)
            const tHeaderTop = ele?.getBoundingClientRect()?.top
            if (tHeaderTop ) {
           		// 50px为Table底部距离页脚底部高度
                setScrollY(`calc(100vh - ${tHeaderTop + 50}px)`)
            }
        }
    })
    return scrollY
}