How to make scrollIntoView() work on first click (Angular 6)?

Question

Previous solution to similar StackOverflow question is focused on Jquery and no possible solution found for angular 6/Javascript.

Currently, I am using scrollIntoView() with behavior as smooth to scroll to a dynamically created div using router outlet, but it only scrolls after the second click, is there anything wrong in my code or is it possible to achieve it in the first click?

Html:

<div>
  <mat-card-title (click)="articleNavigation(documents._id)">{{documents.title}}</mat-card-title>
</div>
<div #test style="width:50%; margin-left: auto; margin-right: auto;">
  <router-outlet></router-outlet>
</div>

ts:

articleNavigation(documentId) {
 this.router.navigate(['./document' , documentId], { relativeTo: this.route });
 this.test.nativeElement.scrollIntoView({behavior: 'smooth'});
}

If I use behavior auto instead of smooth, it works on the first click, but a smooth transition is preferred. One of the possible reason which I think is on the first click, div is created and on the second click scrollIntoView() transits to the div.

score 2 · Accepted Answer · answered Feb 26 '19 at 00:10

2

Try this :

setTimeout(() => {
    this.test.nativeElement.scrollIntoView({behavior: 'smooth'});
});

answered Feb 26 '19 at 00:10

Cyril

254
1
6

After scrolling is there any method to scroll lock to that div? I tried overflow: hidden, it did not work for me. – Madhavan Sundararaj Feb 26 '19 at 00:22
You can try this : [scrollLock](https://stackoverflow.com/questions/6411282/how-to-lock-scrolling-of-a-web-page-temporarily) – Cyril Feb 26 '19 at 00:44
Or this : [link](https://stackoverflow.com/questions/44516017/how-to-handle-window-scroll-event-in-angular-4/44516191) – Cyril Feb 26 '19 at 01:32
Not working, anyways is it possible to make scroll faster in scrollIntoView? – Madhavan Sundararaj Feb 26 '19 at 02:48

How to make scrollIntoView() work on first click (Angular 6)?

1 Answers1