Goal
Display a list of messages and scroll to bottom when a new message is received, even when I am at top. I would like to scroll fully bottom even with elements of different heights.
Problem
With virtual scroll I have to set the [itemSize]
property, but for me it is not a static value:
- When a message is too long for one line it breaks in multiple, so its height changes.
- I have different types of messages with different heights (system messages for example).
Also, I am using ng-content
to insert a button from the parent to load previous messages. What I see is that, when _scrollToBottom
is invoked, instead of taking me to the bottom, it takes me to a bit higher. I suspect this is because of the different heights of elements inside virtual-scroll.
I have read this autosize scroll strategy issue from Angular: https://github.com/angular/components/issues/10113; but I am not sure this will solve my problem.
Any idea of what I could do will be welcome.
Test
Codesandbox: https://codesandbox.io/s/angular-virtual-scroll-biwn6
- When messages are loaded, scroll up.
- Send message. (When the new message is loaded, instead of scrolling to bottom, the virtual-scroll stops a little higher)
- Repeat
Video with the error: https://gofile.io/d/8NG9HD
from Scroll to bottom with cdk-virtual-scroll (Angular 8)
No comments:
Post a Comment