4

I am building a chat app using stencilJS. I have a chat screen which displays chat messages where user can scroll to top to load older chat messages. Issue is whenever older chat loads scroll position is shift to top then I have to reset it to It's previous position. I don't want user to see that we are resetting scroll position from top to previous position, I am trying to achieve scroll like whatsapp scrolling.

I am saving current scroll position before loading new content by using scrollAtTop function which will be called when we reach to top.

scrollAtTop() {
    this.previousScrollTop = document.documentElement.scrollTop;
    this.previousScrollHeight = document.documentElement.scrollHeight;
    this.loadOlderMessages();
  }

Then after content loads scroll changes to top which then I reset to previous position.

 window.scrollTo(0, (document.documentElement.scrollHeight -
        this.previousScrollHeight +
        this.previousScrollTop));

I have tried to use requestAnimationFrame to set scroll position before repaint but that doesn't work. I have also use MutationObservers to detect change in chat list and reset scroll position before repaint of screen but those solutions are not working.

Deepak
  • 1,030
  • 2
  • 10
  • 21
  • Are you sure that it's actually the `documentElement` that is scrolling and not a nested element with `overflow: auto`? Check if the value of `previousScrollTop` is `0`. – Thomas Dec 02 '19 at 13:57
  • @Thomas yeah it is the `documentElement` and `previousScrollTop` is `0`. When the new chat messages loads while scrolling at top it updates the redux store and render whole view again due to which I think scroll position shifts at top. – Deepak Dec 03 '19 at 13:49

0 Answers0