react-component / react-component/table

当有其他东西固定在底部的时候, Tabel 的 sticky 横向滚动条判断不准确,导致出现”无滚动条“ 现象

Open
#948 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.4k
Forks
618
Avg merge
10h 19m
Merged PRs (30d)
2

Description

复现 demo :https://codesandbox.io/s/xuan-ze-he-cao-zuo-antd-5-1-6-forked-sp5e4n?file=/demo.tsx

https://github.com/react-component/table/blob/27a82412f3f7341a7a7d4898cbac1efb1addecbc/src/stickyScrollBar.tsx#L95 此行的逻辑是判断”用户是否看到了默认的横向滚动条“,但是例如 demo 那样,有时候我们需要将分页器等操作区固定在底部,导致有一定距离(这段距离等于分页器的高度)会挡住”默认的横向滚动条“,但是这一行代码没有判断这种情况,导致既看不到”默认的横向滚动条“又不渲染”虚拟的横向滚动条“,即出现”无滚动条“ 现象

image image

希望可以在增加一个开放的 API : Table.sticky.offsetHide
即:
https://github.com/react-component/table/blob/27a82412f3f7341a7a7d4898cbac1efb1addecbc/src/stickyScrollBar.tsx#L95

    if (
-      tableBottomOffset - getScrollBarSize() <= currentClientOffset ||
      tableOffsetTop >= currentClientOffset - offsetScroll
    ) {

    if (
+     tableBottomOffset - getScrollBarSize() + offsetHide <= currentClientOffset ||
      tableOffsetTop >= currentClientOffset - offsetScroll
    ) {

例如我这个情况下,设置 offsetHide 等于 分页器高度,就可以完美解决(已通过 yarn link 调试成功,是可以完美解决的)

亦或者改变”判断用户是否看到默认滚动条“的逻辑,改为使用 IntersectionObserver 等方法来更精准的判断

不仅仅是分页区,以后遇到需要固定的任何底部操作区,都会依赖这个 API,希望大佬可以增加这个支持~万分感谢!!

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with the linked CodeSandbox, then start at src/stickyScrollBar.tsx around line 95 and inspect how the bottom visibility is calculated. Confirm the fixed paginator case and define done as preserving a usable horizontal scrollbar, with the proposed Table.sticky.offsetHide value affecting the hidden-bottom offset.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.