React 虚拟化 - 在列表底部填充

Question

我想知道是否有任何方法可以在列表末尾添加填充底部。我需要这个，因为我在列表底部有一个 material 浮动按钮。因此，如果用户转到列表的末尾，该填充将保存按钮要覆盖的最后一项。

谢谢

Answer 1

它不是填充，但您可以在包含所有项目的 div 底部留一个边距类似的东西：

.ReactVirtualized__Grid__innerScrollContainer {
    margin-bottom: 100px;
}

Answer 2

.ReactVirtualized__Grid__innerScrollContainer[style] {overflow:visible !important;}

react-select 的第 9 版使用内联样式来设置溢出。我使用了它，因此可以在网格末端下方看到工具提示（当网格未占据整个屏幕时）。请参阅 react select 库代码片段：

<div
        className="ReactVirtualized__Grid__innerScrollContainer"
        role={containerRole}
        style={{
          width: autoContainerWidth ? 'auto' : totalColumnsWidth,
          height: totalRowsHeight,
          maxWidth: totalColumnsWidth,
          maxHeight: totalRowsHeight,
          overflow: 'hidden',
          pointerEvents: isScrolling ? 'none' : '',
          position: 'relative',
          ...containerStyle,
}}>

那是在https://github.com/bvaughn/react-virtualized/blob/438b5672e5364cffa91f21656ee2f04003794ca1/source/Grid/Grid.js#L1058

Answer 3

您可以设置列表中最后一项的高度以包括填充，因为 rowHeight 可以传递给函数。

然后您需要做的就是设置列表项的样式，使最后一项的额外高度为空 space、底部边距或内部内容的固定高度都可以。

https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types.

React 虚拟化 - 在列表底部填充

React virtualized - Padding bottom on List

react-virtualized