angular - Angular 2：粘性滚动条和 ViewportScroller，滚动到带有粘性导航栏的锚元素

Question

我只是使用 ViewportScroller 单击并移动到锚元素：

@Component({
  selector: 'app-service',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss']
})
export class SampleComponent {

  constructor(private viewportScroller: ViewportScroller) {}

  public scrollToElementId(elementId: string): void {
    this.viewportScroller.scrollToAnchor(elementId);
  }

}

<div (click)="scrollToElementId('myDivToScroll')"></div>

<div id="myDivToScroll">Hello there</div>

这工作得很好。

但是，我现在添加了一个粘性导航栏。那个粘性导航栏总是在我的锚元素之上。如何让 scrollToAnchor 调用忽略粘性导航栏高度？如何在 Angular 10 中解决这个问题？

标签： angular

Answer 1

发现它：viewportScroller提供了一个setOffset让你调整视口滚动的功能。