Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#948 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
45/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Tái hiện vấn đề bằng CodeSandbox được liên kết, sau đó bắt đầu từ src/stickyScrollBar.tsx quanh dòng 95 và kiểm tra cách khả năng hiển thị ở phía dưới được tính toán. Xác nhận trường hợp paginator cố định và xác định hoàn thành là vẫn giữ được thanh cuộn ngang có thể sử dụng, trong đó giá trị Table.sticky.offsetHide được đề xuất ảnh hưởng đến offset phía dưới bị ẩn.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

复现 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，希望大佬可以增加这个支持~万分感谢！！

Ngôn ngữ chính
TypeScript
Star
1.4k
Fork
618
Merge trung bình
10 giờ 19 phút
Pull request đã merge (30 ngày)
2

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react-component/table

Tất cả issue của react-component/table

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.