Блог

Главная - Вопросы по программированию - Angular 2: липкая полоса прокрутки и ViewportScroller, прокрутка до элемента привязки с помощью липкой панели навигации

Angular 2: липкая полоса прокрутки и ViewportScroller, прокрутка до элемента привязки с помощью липкой панели навигации

#angular

#angular

Вопрос:

Я просто использую 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?

Ответ №1:

Нашел это: viewportScroller предоставляет setOffset функцию, которая позволяет настраивать прокрутку viewportscroll.