我正在尝试和AutoSizer一起使用React Virtualized List。这就是我的问题:我将列表的高度设置为200px,然后我在Chrome检查器中看到高度是200,这是可以的,但是溢出的内容是可见的,即使我看到ReatVirtualized_Grid_innerScrollContainer的css样式是overflow: hidden。这个问题导致没有垂直滚动条,并且显示了很大一部分数据,但不是全部。所以它显示了比我坐的指定高度多得多的数据。为什么会这样呢?
这是我的代码:
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}
/>
);
}
发布于 2018-10-11 12:40:01
问题是,在项目中的某个地方,这两个溢出被覆盖了:
因此,解决方案是将覆盖溢出的CSS的范围限定为仅需要它的目标位置,而不是全局添加它,这样它将影响所有的React Virtualized List组件。
发布于 2019-07-22 06:20:15
我必须取消设置CSS属性will-change
,以使用react-virtualized获得要显示的滚动条
.ReactVirtualized__Grid.ReactVirtualized__List {
will-change: unset !important;
}
https://stackoverflow.com/questions/52757755
复制相似问题