react-virtualized列表为何需height小于rowCount*rowHeight才显示滚动条？

这是react-virtualized 9.x版本存在的临界值计算精度问题。

当你设置height={myList.length * 30}时，刚好触发了组件内部的判断逻辑bug：组件会对比内容总高度和容器的maxHeight（657px），但因为浮点数计算精度或者浏览器像素取整的影响，即使内容总高度（比如22项时是660px）明明超过了maxHeight，组件也会误判为“内容未超出容器”，因此不渲染滚动条，导致后面的项被截断。

你用到的两个临时解决方法刚好验证了这个问题：

• 把height设为myList.length*30 - 0.001：打破了“内容高度刚好等于临界值”的状态，组件能正确识别到内容超出，触发滚动条
• 把rowCount设为myList.length + 1：直接让内容总高度超过maxHeight，组件自然会显示滚动条

推荐的解决方式：

1. 给height加微小偏移：设置height={myList.length * 30 - 0.1}，既不影响布局，又能避开临界值问题
2. 避免依赖精确的高度计算：如果场景允许，直接把height设为一个固定的较大值（比如height={10000}），让react-virtualized自己处理虚拟滚动，不需要手动计算总高度
3. 升级组件版本：react-virtualized后续版本已经修复了这类精度问题，如果项目依赖允许，升级到10.x及以上版本可以彻底解决

内容的提问来源于stack exchange，提问作者Milan Smolík