React-virtualized List scroll going crazy and Autosizer doesn't work

问题

The scroll of the list is going crazy when I scroll and it keeps jittering afterwards even if I don't do anything) as you can see here: https://imgur.com/SdgMf7f (sorry embedding that gif doesn't work here)

I made a minimal example where it happens in:

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

I did pass the style to the rows.

Also, if you change the height and width of the list to get the values from Autosizer, then the list doesn't appear, even though this looks exactly like in the example.

Any ideas how to fix these two problems?

EDIT: it seems that it works a little better in Firefox, still a little jumpy in my own code though and the codesandbox's scroll still isn't perfect. (it's super jumpy in chrome, even in incognito).

回答1:

It seems the problem was related to 2 issues:

• Not delegating height and width from <AutoSizer> to the <List>

• Row height was defined as 50 but the actual rendered height was more -

  From the docs: Note that it is very important that rows do not have vertical overflow. It would make scrolling the list difficult (as individual items will intercept the scroll events)

Here's a working example: https://codesandbox.io/s/jppm1mmo83

来源：https://stackoverflow.com/questions/50463616/react-virtualized-list-scroll-going-crazy-and-autosizer-doesnt-work