javascript - scrollIntoView() 不适用于应用程序选择器

Question

有谁知道滚动到锚点的正确实现。这种方法不起作用： Angular2 滚动到具有 *ngIf 的元素

这是引用其他组件的模板：

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

通过单击一个按钮，我想滚动到相应的部分：

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

scrollIntoView() 已执行，但它滚动到错误的位置（如部分的中间）并且根本不适用于 app-app3。

标签： javascriptangulartypescript

Answer 1

我这样修复它： 1. 从应用选择器组件中删除“id3”：

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

2. 将新的 div 放在组件的最顶部：

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

3. 改变：

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

至：

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