Scrolling to the very top causes infinite fetching and content jumps

[AlexShukel]

Describe the bug When user scrolls to the very top of infinite list, the request to get new messages is called. However, if scroll position is at the top (container.scrollTop equals to zero), then browser will shift scroll to new top, and so new request will be called. And so on...

To Reproduce codesandbox example Steps to reproduce the behavior: click on 'add item' and see how contents jump. This is default HTML behavior which is not suitable for scrolling infinite lists.

Expected behavior It is expected to retain contents in the visible area and do not scroll to the new top.

Possible solution Add onScroll event handler on container and adjust container.scrollTop property: set it to Math.max(1, container.scrollTop)

Additional context There exists a relatively new feature called scroll anchoring, but I haven't found any effect of CSS property overflow-anchor on scroll behavior in such situation.

[AlexShukel]

Tried alternatives

• Using scroll snap only for the first element in such a way that it will always scroll a little to the start of first element. Applying those styles:

  
  .first-child {
  margin-top: 5px;
  scroll-snap-align: start;
  }

.container { scroll-snap-type: y proximity; }

This approach doesn't work if user is constantly scrolling to the top in such a way that scroll snap does not apply.

- Set `container.scrollTop` property to `Math.max(1, container.scrollTop)` as described in the description, but do it before `setState` call. This will probably be a better solution when implementing in `MessageList`, because in this way user will have a possibility to scroll anywhere. I haven't included this in issue description because in my sandbox example I am currently using `onScroll` that is fired many times instead of `IntersectionObserver`.