Angular указать c способ определения направления прокрутки - PullRequest
Новая
       2

Angular указать c способ определения направления прокрутки

1 голос
/ 08 мая 2020

Есть ли какой-нибудь angular специфический c способ определить, выполняет ли пользователь прокрутку вверх или вниз? Я столкнулся с решениями, которые были либо примерно jQuery, либо чистыми JavaScript. Я пробовал ниже JSFiddle, но не понял, он всегда показывает прокрутку вверх.

JSFiddle Demo

Вот как я это пробовал: 

this.currentPosition = window.pageYOffset;

onContentScrolled(e) {
    let scroll = window.pageYOffset;
    if (scroll > this.currentPosition) {
      console.log('scrollDown');
    } else {
      console.log('scrollUp');
    }
    this.currentPosition = scroll;
}

Скрипка работает нормально. Но я хочу знать, как правильно реализовать в компоненте angular.

Каждый раз выводит только "scrollUp". Может ли кто-нибудь сказать мне, что я здесь делаю не так? Думаю, дело в глобальной переменной currentPosition, но не знаю, что делать дальше.

Ответы [ 3 ]

2 голосов
/ 08 мая 2020

моя наблюдаемая версия: StackBlitz

2 голосов
/ 08 мая 2020

Возможно, в моем приложении гораздо более сложная структура, которая включает динамический c контент из различных компонентов, поэтому я попробовал ниже, и он работал без проблем! 

private scrollChangeCallback: () => void;
currentPosition: any;
startPosition: number;

ngAfterViewInit() {
  this.scrollChangeCallback = () => this.onContentScrolled(event);
  window.addEventListener('scroll', this.scrollChangeCallback, true);
}

 onContentScrolled(e) {
  this.startPosition = e.srcElement.scrollTop;
  let scroll = e.srcElement.scrollTop;
  if (scroll > this.currentPosition) {
    this.showButton = false;
  } else {
    this.showButton = true;
  }
  this.currentPosition = scroll;
}

ngOnDestroy() {
  window.removeEventListener('scroll', this.scrollChangeCallback, true);
}

e.srcElement работает как шарм!

И спасибо за все решения выше! Они не ошибались, просто не подходили для моего приложения

2 голосов
/ 08 мая 2020

Это зависит от того, куда вы хотите добавить слушателя (в конкретный компонент c, в документ, в тело и т. Д. c). Серебряная пуля - использовать обычный прослушиватель событий. В качестве примера послушаем события прокрутки документа. Вы можете ввести document в конструктор (на всякий случай, если вы захотите использовать что-то вроде SSR в будущем):

Stackblitz demo 

constructor(@Inject(DOCUMENT) private _document: Document) {
  this._document.addEventListener('scroll', this.onContentScrolled);
}

ngOnDestroy() {
  this._document.removeEventListener('scroll', this.onContentScrolled);
}

onContentScrolled(e) {
  let scroll = window.pageYOffset;
  if (scroll > this.currentPosition) {
    console.log('scrollDown');
  } else {
    console.log('scrollUp');
  }
  this.currentPosition = scroll;
}

If вы хотите сделать то же самое с полосой прокрутки, содержащейся в компоненте, вы можете использовать @HostListener('scroll') для украшения метода прослушивателя внутри компонента, который вы хотите прослушивать для событий прокрутки.

Stackblitz demo 

@HostListener("scroll", ['$event.target'])
onContentScrolled(e: HTMLElement) {
  let scroll = e.scrollTop;
  if (scroll > this.currentPosition) {
    console.log("scrollDown");
  } else {
    console.log("scrollUp");
  }
  this.currentPosition = scroll;
}
...