jumpy scrolling when height is not the same as averageElementHeight

[Radivarig]

Having this code

  render () {
    var renderRow = (i) => <div key={i} style={{height: 300}}> item </div>
    return (
      <InfiniteSccroller
         averageElementHeight={200}
          containerHeight={600}
          rowToJumpTo={{row: 0}}
          renderRow={renderRow}
          totalNumberOfRows={100}
        />
    )
}

where element height (300) is different from averageElementHeight (200), scrolling is not smooth but snapping. Am I doing something wrong?

[tnrich]

Hey there, is it noticeably more janky than the demo page?

On Wed, Jul 6, 2016, 6:30 PM Reslav Hollós notifications@github.com wrote:

Having this code

render () { var renderRow = (i) => <div key={i} style={{height: 300}}> item

[Radivarig]

Yeah, first I thought it is because of nested divs (their height can be 0, so css tricks are needed) or that changing list length was the problem, but the above is with single div and fixed length. I also thought if maybe the scroll container was wrong, but the above is being rendered in document.body. How do you determine the height? Do you correct scroll by the difference? And in that case how do you get the scrolling container that has .scrollTop?

[tnrich]

Hey there @Radivarig, I tried out the example you posted, and indeed, the scrollbar jumps around (though the scrolling of the items themselves was indeed smooth for me). This is the expected behavior actually because currently the top/bottom spacers are calculated using the estimated row height.

I would try using https://github.com/orgsync/react-list as they now have better support for the variable height use-case (see the https://github.com/orgsync/react-list#itemsizeestimatorindex-cache).

I actually just made a painless switch to using react-list and think they've done a great job!

[Radivarig]

Hm, I've tested react-list, and it doesn't have the top and bottom empty div that changes its height, does it optimize large lists?

[tnrich]

Hey Reslav, yes it does optimize large lists. I think now that it has the itemSizeEstimator functionality, it is actually better than my implementation in most regards.

Let me know what you think if you do use it.

Cheers, Thomas

On Thu, Jul 7, 2016 at 4:48 PM Reslav Hollós notifications@github.com wrote:

Hm, I've tested react-list, and it doesn't have the top and bottom empty div that changes its height, does it optimize large lists?

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/tnrich/react-variable-height-infinite-scroller/issues/18#issuecomment-231240213, or mute the thread https://github.com/notifications/unsubscribe/ACmqcWI71vnyA7Jw36dDw2hfUaHy53Txks5qTZA9gaJpZM4JGqCt .