代码之家  ›  专栏  ›  技术社区  ›  shinzou

React虚拟化列表滚动变得疯狂,AutoSizer无法工作

  •  0
  • shinzou  · 技术社区  · 6 年前

    当我滚动时,列表的滚动会变得疯狂,即使我什么都不做,它也会一直抖动),如您所见: https://imgur.com/SdgMf7f (抱歉,嵌入GIF在这里不起作用)

    我做了一个最小的例子,它发生在:

    https://codesandbox.io/s/4r2q3omv1w

    我确实将样式传递给了行。

    此外,如果更改列表的高度和宽度以从AutoSizer获取值,则不会显示该列表,即使它与 example .

    有什么办法解决这两个问题吗?

    编辑:似乎它在火狐中工作得更好,但在我自己的代码中仍然有点不稳定,并且代码沙盒的滚动仍然不完美。(它在铬合金中是超级跳动的,即使是不认识的)。

    1 回复  |  直到 6 年前
        1
  •  2
  •   Y. Sobelman    6 年前

    问题似乎与两个问题有关:

    • 不授权 height width <AutoSizer> <List>
    • 行高定义为 50 但实际渲染高度更高-

      来自 docs : 请注意,行没有垂直溢出非常重要。这将使滚动列表变得困难(因为单个项目将截获滚动事件)

    下面是一个工作示例: https://codesandbox.io/s/jppm1mmo83