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

[Bug] Virtual scrollbar overlaps the content instead of reserving a gutter

Đang mở
  • Có gì không ổn?
#391 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ó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
55/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Start in src/ScrollBar.tsx and trace how the scrollbar is rendered alongside the holder and positioned against the list root. Compare the vertical and horizontal cases, including right-to-left positioning, and check existing scrollbar and layout tests. Done means virtual scrollbars no longer overlap the content or last row, with spacing preserved in both directions.

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

Mô tả

Related antd issues (this was found while working on antd's Listy):

  • ant-design/ant-design#59641 — spacing between the content and the virtual scrollbar
  • ant-design/ant-design#59633 — the virtual scrollbar thumb colour falling back to rgba(0, 0, 0, 0.5)
What problem does this feature solve?

In virtual mode the custom scrollbar is absolutely positioned at the right edge of the list root and does not reserve any space, so the content underneath it gets covered.

Concrete case — antd Listy:

  • The row breathing room lives on the item itself: .ant-listy-item { padding: 12px 16px } — that 16px right padding is what separates the row content from the list edge.
  • The vertical scrollbar is 8px wide and sits at right: 0 of the list root.
  • Net effect: the scrollbar covers the rightmost 8px of that 16px padding, so the gap between the content and the scrollbar is 8px instead of 16px — and unlike a native overlay scrollbar this one is always visible, so the halved spacing is permanent.

Measured (antd 6.6.7, Chrome 155, macOS 26.7), list width 320px:

mode item right padding content box right edge scrollbar left edge content → scrollbar
virtual 16px 336px 344px 8px
non-virtual 16px 336px 352px 16px

Same component, same items, same width — only the spacing differs because of the virtual switch.

Repro: https://codesandbox.io/p/devbox/k3g67m?file=%2Findex.tsx — two <Listy> side by side, the top one with virtual, the bottom one without.

What does the expected behavior look like?

The scrollbar should not sit on top of the content. Either:

  1. reserve a gutter for it (e.g. scrollbar-gutter: stable, or add the scrollbar width to the content box), or
  2. behave like a native overlay scrollbar (visible on hover / while scrolling only).

At minimum the distance between the content and the scrollbar should not change when toggling virtual.

Where the code lives

src/ScrollBar.tsx:

const containerStyle = {
  position: 'absolute',
  visibility: visible ? null : 'hidden',
};
// vertical
Object.assign(containerStyle, {
  width: 8,
  top: 0,
  bottom: 0,
  [isLTR ? 'right' : 'left']: 0,
});

The scrollbar is rendered as a sibling of the holder and positioned against the list root, so the content box is never inset by the scrollbar width.

Additional notes
  • The horizontal scrollbar has the same problem in the other direction (height: 8; bottom: 0) — it covers the bottom padding of the last visible row.
  • The thumb colour falls back to rgba(0, 0, 0, 0.5) here (var(--rc-virtual-list-scrollbar-bg, rgba(0, 0, 0, 0.5))); consumers currently have to override that variable themselves, e.g. antd does it per component (see ant-design/ant-design#59633).
  • Consumers also work around the overlap themselves — e.g. antd's Tree adds padding-right to its list to keep the row highlight clear of the capsule scrollbar. Handling it once here would be better for every consumer.
Environment
  • @rc-component/virtual-list: 1.5.2
  • antd: 6.6.7 (the consumer used for the measurements above)
  • Chrome 155.0.8059.85 / macOS 26.7.1
Ngôn ngữ chính
TypeScript
Star
812
Fork
171
Không có pull request nào được merge trong 30 ngày

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/virtual-list

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

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.