Angular how to scroll all the way down in a specified div from typeScript

Question

I'm having troubles with scrolling from ts, I tried different methods that worked for other people but they all failed

this is how I declare the div

    <div #chat id="chat" class="card-body msg_card_body">
    ...
    </div>

this is the simple CSS

.msg_card_body {
  overflow-y: auto;
}

and this is how I tried to scroll it

ngAfterViewInit(): void {
    this.scrollDown();
  }

  scrollDown(){
    var container = this.el.nativeElement.querySelector("#chat");
    console.log(container.scrollTop)
    console.log(container.scrollHeight)
    container.scrollTop = container.scrollHeight;
    console.log(container.scrollTop)
  }

from the various console logs I noted that scrollTop is 0, scrollHeight is over 500, and after I assign scrollHeight to scrollTop scrollTop remains 0

I'm genuinely confused

have you tried in ngAfterViewChecked rather than ngAfterViewInit? — SWilko
– SWilko, Commented Dec 3, 2021 at 10:18
wow, with that it works, thank you very much, but could you explain to me the differences between the interfaces? — santocielo99
– santocielo99, Commented Dec 3, 2021 at 10:22

santocielo99 · Accepted Answer · 2021-12-03 10:25:57Z

1

Solved, had to call the function in ngAfterViewChecked instead of ngAfterViewInit

answered Dec 3, 2021 at 10:25

santocielo99

1231 gold badge4 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular how to scroll all the way down in a specified div from typeScript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related