[Bug] Virtual scrollbar overlaps the content instead of reserving a gutter
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 55/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- react, typescript
- 领域
- frontend
调研方向
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.
由索引模型根据 Issue 内容生成。
描述
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: 0of 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:
- reserve a gutter for it (e.g.
scrollbar-gutter: stable, or add the scrollbar width to the content box), or - 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
Treeaddspadding-rightto 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
- 主要语言
- TypeScript
- 星标
- 812
- 派生
- 171
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
react-component/virtual-list 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 58/100
react-component/virtual-list#325 · 1 条评论 ·
-
难度 4/5 3-5 天 新手友好度 35/100
react-component/virtual-list#303 ·
-
希望添加横向虚拟滚动未关闭
难度 5/5 一周以上 新手友好度 25/100
react-component/virtual-list#297 ·
-
难度 4/5 3-5 天 新手友好度 35/100
react-component/virtual-list#292 ·
-
难度 3/5 1-2 天 新手友好度 42/100
react-component/virtual-list#290 · 1 条评论 ·
查看 react-component/virtual-list 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 76/100
openremote/openremote#3487 · 1 条评论 ·
-
难度 2/5 1-3 小时 新手友好度 82/100
coollabsio/jean#867 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 76/100
ehmpathy/rhachet-roles-bhuild#616 ·
维护者通常 1 天内回复
-
📘 Docs supabase/cli
难度 2/5 1-3 小时 新手友好度 83/100
维护者通常 1 天内回复
-
bug(cli): theme file home-directory check uses startsWith (sibling dirs pass, Windows casing fails)未关闭area/core kind/bug priority/p2 status/bot-triaged
难度 2/5 1-3 小时 新手友好度 79/100
google-gemini/gemini-cli#29955 · 2 条评论 ·
维护者通常 1 天内回复