1

I have a component that has <cdk-virtual-scroll-viewport> but now I want it to start from the bottom.

When I refresh the page it should automatically go to the bottom instead of the top

Here is what I tried to do:

Component:

@ViewChild(CdkVirtualScrollViewport, { static: false }) viewport: CdkVirtualScrollViewport;

ngOnInit() {
  this.viewport.scrollTo({ bottom: 0 ]);
}

HTML:

<cdk-virtual-scroll-viewport itemSize="20">
  <div
    *cdkVirtualFor="let message of (chatRoomMessages$ | async)"
  >
    <div class="message">{{message}}</div>
  </div>
</cdk-virtual-scroll-viewport>

CSS:

cdk-virtual-scroll-viewport {
  width: 100%;
  height: 100vh;

  .message + .message {
    margin-top: 10px;
  }
}
Alan S
  • 93
  • 1
  • 9
  • this answer might help: https://stackoverflow.com/questions/35232731/angular2-scroll-to-bottom-chat-style – Iftifar Taz Sep 12 '19 at 18:50
  • @IftifarTaz op is asking about cdk-virtual-scroll-viewport, the question you are citing is about div..so it's not relevant – Omar Salem Jun 27 '20 at 03:23

0 Answers0