React-virtualized: Scroll stutters/resets when using CellMeasurer with scrollToIndex on a List

Created on 5 Sep 2017 · 4Comments · Source: bvaughn/react-virtualized

When using CellMeasurer and scrollToIndex at the same time (on a List), scrolling upward seems to be broken. Explained in more detail here:

Plunker:

bug help wanted

Source

athorwall

Most helpful comment

It actually seems that there are two distinct issues here:

If you scroll upward toward unmeasured cells, then once the cells are measured the cells after them will jump down to accommodate the newly measured cells above them. The severity of the effect is related to the difference between a cell's default size and the actual size. This seems to be a very challenging issue to solve, and I think it's the focus of #610.
Independent of that, when you use the scrollToIndex prop on a list that also uses CellMeasurer, the list seems to repeatedly jump back to the specified index (maybe whenever cells are measured?), as if the list seems to think that the scrollToIndex prop changed (and thus it must scroll to the new value) even though it has not. This issue is briefly mentioned in #610 but is mostly ignored--intuitively it seems like it's probably much easier to solve. At the very least, it seems like we can workaround this issue by calling List.scrollToRow() instead of setting the scrollToIndex prop. Example: https://plnkr.co/edit/8V4AtlqPtELrmDQMgBr7?p=preview (click "CLICK ME" and it will scroll to row 150; then attempt to scroll up and it should work fine).

athorwall on 6 Sep 2017

👍7

raffy2010 on 6 Sep 2017

It actually seems that there are two distinct issues here:

If you scroll upward toward unmeasured cells, then once the cells are measured the cells after them will jump down to accommodate the newly measured cells above them. The severity of the effect is related to the difference between a cell's default size and the actual size. This seems to be a very challenging issue to solve, and I think it's the focus of #610.
Independent of that, when you use the scrollToIndex prop on a list that also uses CellMeasurer, the list seems to repeatedly jump back to the specified index (maybe whenever cells are measured?), as if the list seems to think that the scrollToIndex prop changed (and thus it must scroll to the new value) even though it has not. This issue is briefly mentioned in #610 but is mostly ignored--intuitively it seems like it's probably much easier to solve. At the very least, it seems like we can workaround this issue by calling List.scrollToRow() instead of setting the scrollToIndex prop. Example: https://plnkr.co/edit/8V4AtlqPtELrmDQMgBr7?p=preview (click "CLICK ME" and it will scroll to row 150; then attempt to scroll up and it should work fine).