使用 AutoSizer 反应虚拟化列表 - 不出现垂直滚动条答案

【问题标题】：React Virtualized List with AutoSizer - vertical scrollbar does not appear使用 AutoSizer 反应虚拟化列表 - 不出现垂直滚动条
【发布时间】：2018-10-11 10:23:56
【问题描述】：

我正在尝试将 React Virtualized List 与 AutoSizer 一起使用。这是我的问题：我将列表的高度设置为 200px，然后在 Chrome 检查器中看到高度为 200，这没关系，但是即使我看到 ReatVirtualized_Grid_innerScrollContainer 的 css 样式，溢出的内容也是可见的坐到溢出：隐藏。该问题导致没有垂直滚动条并且正在显示大部分数据，但不是全部。所以它显示的数据比我坐的指定高度多得多。这是为什么呢？

这是我的代码：

import Row from './Row';
...
render () {
  return (
    <AutoSizer disableHeight>
     {({ width })} => (
       <List
          height={200}
          width={width}
          rowCount={this.props.list.size}
          rowRenderer={this.rowRenderer}
          rowHeight={24}
        />
      )}
    </AutoSizer>
  );
}
rowRenderer = ({ key, style, index, parent }) => {
  const row = this.props.list.get(index);
  return (
    <Row
      row={row}
      style={style}
      rowIndex={index}
      parent={parent}
      columnIndex={0}
    />
  );
}

【问题讨论】：

标签： css reactjs

【解决方案1】：

问题是在项目的某个地方，两个溢出被覆盖：

ReactVirtualized__Grid__innerScrollContainer
和里面的 ReactVirtualized__Grid__innerScrollContainer

因此解决方案是将覆盖溢出的 CSS 限定为仅针对需要它的位置，而不是全局添加它，这样它会影响所有 React Virtualized List 组件。

【讨论】：

【解决方案2】：

我必须取消设置 CSS 属性 will-change 才能使用 react-virtualized 显示滚动条

.ReactVirtualized__Grid.ReactVirtualized__List {
  will-change: unset !important;
}

【讨论】：