Question

我正在尝试将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}
    />
  );
}

Answer 1

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

ReactVirtualized__Grid__innerScrollContainer
以及其中的ReactVirtualized__Grid__innerScrollContainer

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

Answer 2

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

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

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

2 个答案: