Virtual scroll start on bottom

[buu700]

It'd be very useful (an unblocker for my use case) if the CDK virtual scroller supported an option to start off scrolled to the bottom instead of the top.

With non-virtual scrolling there are plenty of workarounds to achieve something to this effect, but with virtual scrolling (and autosize) I can't see an obvious way to accomplish it.

[buu700]

Ah wait, if I'm understanding #10116 correctly, it sounds like that will address this?

If so, I'll go ahead and close this and subscribe to that.

[mmalerba]

Yes, scrollToIndex is currently implemented for fixed size virtual scroll, but not yet for autosize. #10116 is left open to track implementing it for autosize

[buu700]

Got it, thanks!

[jonaaix]

@buu700 How did you finally implement it?

[buu700]

I'm still waiting on #10116 for a cleaner solution, but this is what I ended up doing for now:

@ViewChild(CdkVirtualScrollViewport)
public virtualScrollViewport?: CdkVirtualScrollViewport;

. . .

this.virtualScrollViewport.scrollTo({bottom: 0});

[jonaaix]

Hmm it works, but it's really not optimal. When building chat apps, there will always be a scroll animation onload. @buu700 But thanks for fast replying ;)

[derSoerrn95]

I'm still waiting on #10116 for a cleaner solution, but this is what I ended up doing for now:

@ViewChild(CdkVirtualScrollViewport)
public virtualScrollViewport?: CdkVirtualScrollViewport;

. . .

this.virtualScrollViewport.scrollTo({bottom: 0});

hey, sorry - but i don't get it. I wrote something like that:

this.messages$ = merge(this.messageReceiving$, this.messagesLoading$)
      .pipe(
        map((scrolledUp: boolean) => {
          if (!scrolledUp) {
            this.scrollDown = true;
          }
          return this.currentChat.messages;
        }),
        share()
      );

ngAfterViewChecked() {
    if (this.scrollDown === true) {
      this.messageList.scrollTo({ bottom: 0, behavior: 'auto' });
      this.scrollDown = false;
    }
}

But this doesn't really run well. How did u handle that @buu700?

[buu700]

Well, I'm pretty sure that worked out the time I wrote the comment, but at some point it stopped the working and we actually ended up just disabling virtual scrolling for now due to that and various small bugs that made it unusable :/.

…

On Tue, Jan 22, 2019, 11:22 AM derSoerrn95 ***@***.***> wrote: I'm still waiting on #10116 <#10116> for a cleaner solution, but this is what I ended up doing for now: @ViewChild(CdkVirtualScrollViewport) public virtualScrollViewport?: CdkVirtualScrollViewport; . . . this.virtualScrollViewport.scrollTo({bottom: 0}); hey, sorry - but i don't get it. I wrote something like that: this.messages$ = merge(this.messageReceiving$, this.messagesLoading$) .pipe( map((scrolledUp: boolean) => { if (!scrolledUp) { this.scrollDown = true; } return this.currentChat.messages; }), share() ); ngAfterViewChecked() { if (this.scrollDown === true) { this.messageList.scrollTo({ bottom: 0, behavior: 'auto' }); this.scrollDown = false; } } But this doesn't really run well. How did u handle that @buu700 <https://github.com/buu700>? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12932 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAZWy_FxUaaO6bXGDB2ZZD88FJJ2ngVKks5vFzq4gaJpZM4WWCnk> .

[derSoerrn95]

ok, thanks for reply. I also stopped using virtual scrolling for that usecase.

[Stradivario]

@buu700 basically we need to stop using virtual scroll provided inside the documentation ? Is that what you say ? :(

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}