scrollIntoView() doesn't work with application selector

Question

Does anybody know the proper implementation of scrolling to anchor. This approach doesn't work: Angular2 scroll to element that has *ngIf

Here is the template that has references to other components:

<app-app1 id="id1"></app-app1>
<app-app2 id="id2"></app-app2>
<app-app3 id="id3" *ngIf="test"></app-app3>

By clicking on a button I'd like to scroll to the appropriate section:

let elm = document.querySelector("#id1");
if (elm)
  elm.scrollIntoView();

The scrollIntoView() is executed but it scroll to wrong place (like to the middle of the section) and doesn't work for app-app3 at all.

In my case it's true when page loads.. and not changed then... *ngIf not really big problem.. first I want it to scroll to the proper place within the app selector — John Glabb, Apr 26 '18 at 02:27
@JohnGlabb do you have multiple elements with the `id` of `id1` .. — Derek Pollard, Apr 26 '18 at 02:31
no.. it's unique.. Consider that the content of each component is really large. I even tried to wrap it into parent — John Glabb, Apr 26 '18 at 02:34

score 0 · Answer 1 · answered Apr 26 '18 at 19:50

I fixed it this way: 1. Remove "id3" from app selector component:

   change: <app-app3 id="id3" *ngIf="test"></app-app3>
   to:     <app-app3 *ngIf="test"></app-app3>

< div id="id3"> < /div >

let elm = document.querySelector("#id3");
if (elm)
  elm.scrollIntoView();

to:

let elm = document.getElementById("id3");
elm.scrollIntoView({behavior: "instant", block: "center", inline: "center"});

1 Answers1