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
}
Antd table滚动高度动态获取自定义hooks useScrollY
最新推荐文章于 2024-07-05 10:47:47 发布