React Virtualized Lists 填充列表项

Question

我正在尝试使用水平填充的列表项，以便滚动条完美地位于容器的最右侧。我有 3 个不太理想的解决方案，还有其他方法吗？

https://codesandbox.io/s/charming-maxwell-k6l6r?file=/src/App.js

我提出的不理想的解决方案是：

将边距提升到外部 div（滚动条现在不在容器的最右侧）
列表项包含另一个 div（不理想，因为我们在组件周围创建了另一个不必要的 DOM 元素）
覆盖 rowRenderer 中的样式（库强制列表项将样式作为参数，并且该样式的宽度为 100%。）

Answer 1

在文档中遗漏了一些内容后找到了答案。

只需在List的style属性中添加一些padding

<List
    style={{padding: '10px'}}
    height={height}
    width={width}
    rowCount={rowCount}
    rowHeight={rowHeight}
    rowRenderer={rowRenderer}
/>

React Virtualized Lists 填充列表项

React Virtualized Lists padded list items

css

reactjs

react-virtualized