Прокручиваемое расстояние от вершины в ng-perfect-scrolbar - PullRequest
Новая
       7

Прокручиваемое расстояние от вершины в ng-perfect-scrolbar

0 голосов
/ 24 августа 2018

Я хочу подписаться на событие прокрутки на панели ng-perfect-scroll для отслеживания пройденного расстояния.Примерно так: 

<perfect-scrollbar (onScroll)='distanceFromTop => console.log(distanceFromTop )'>
   <router-outlet></router-outlet>
</perfect-scrollbar>

Что я пробовал: я добавил директиву на полосу прокрутки и попытался получить нативный элемент и установил onscroll для своей функции: 

<perfect-scrollbar #mainScrollbar>
   <router-outlet></router-outlet>
</perfect-scrollbar>

@ViewChild('mainScrollbar') private mainScrollbar: 
ElementRef<HTMLElement>;

ngAfterContentInit() {
   console.log(this.mainScrollbar.nativeElement);
   this.mainScrollbar.nativeElement.onscroll = e => console.log(e);
}

I'mполучение следующих сообщений в консоли:

undefined TypeError: Невозможно прочитать свойство 'nativeElement' из undefined

Нет необходимости использовать @ViewChild для ответа на мой вопрос,Мне просто нужен рабочий пример регистрации расстояния прокрутки.

1 Ответ

0 голосов
/ 24 августа 2018

Для других людей, которые могут быть заинтересованы в ответе, после поиска в реализации я нашел решение:

1) Получить ссылку на компонент, как в демонстрационное приложение

@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;

2) Получить ссылку на директиву из ссылки на компонент:

this.componentRef.directiveRef

3) Теперь вы можете вызывать позицию на ссылке директивы:

console.log(this.componentRef.directiveRef.position(true));

4) Чтобы прокручивать расстояние каждый раз, когда пользователь выполняет прокрутку, используйте такие директивы, как: (psScrollY) или (psScrollX) с функцией обратного вызова, которая вызывает this.componentRef.directiveRef.position(true)

...