@ionic/angular#ScrollCustomEvent TypeScript Examples

The following examples show how to use @ionic/angular#ScrollCustomEvent. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ngx-hide-on-scroll.directive.ts    From Elastos.Essentials.App with MIT License 5 votes vote down vote up 
init() {
    if (isPlatformServer(this.platformId)) {
      return;
    }

    this.reset();

    let elementToListenScrollEvent;
    let scrollingElement: HTMLElement;
    if (!this.scrollingElementSelector) {
      elementToListenScrollEvent = window;
      scrollingElement = this.getDefaultScrollingElement();
    } else {
      scrollingElement = document.querySelector(this.scrollingElementSelector) as HTMLElement;
      if (!scrollingElement) {
        console.warn(`NgxHideOnScroll: @Input() scrollingElementSelector\nElement with selector: "${this.scrollingElementSelector}" not found.`);
        return;
      }
      elementToListenScrollEvent = scrollingElement;
    }

    /* elementToListenScrollEvent.addEventListener("scroll", e => {
      console.log("MANUAL ON SCROLL", e)
    }) */

    /*  elementToListenScrollEvent.addEventListener("ionScroll", e => {
       console.log("MANUAL ON ION-SCROLL", e)
     })
  */
    const scroll$ = fromEvent<ScrollCustomEvent>(elementToListenScrollEvent, 'ionScroll').pipe(
      takeUntil(this.unsubscribeNotifier),
      throttleTime(50), // only emit every 50 ms
      map(event => event.detail.scrollTop), // get vertical scroll position
      pairwise(),  // look at this and the last emitted element
      // compare this and the last element to figure out scrolling direction
      map(([y1, y2]): ScrollDirection => (y2 < y1 ? ScrollDirection.Up : ScrollDirection.Down)),
      distinctUntilChanged(), // only emit when scrolling direction changed
      share(), // share a single subscription to the underlying sequence in case of multiple subscribers
    );

    const scrollUp$ = scroll$.pipe(
      filter(direction => direction === ScrollDirection.Up)
    );

    const scrollDown$ = scroll$.pipe(
      filter(direction => direction === ScrollDirection.Down)
    );

    let scrollUpAction: () => void;
    let scrollDownAction: () => void;
    if (this.hideOnScroll === 'Up') {
      scrollUpAction = () => this.hideElement(scrollingElement);
      scrollDownAction = () => this.showElement(scrollingElement);
    } else {
      scrollUpAction = () => this.showElement(scrollingElement);
      scrollDownAction = () => this.hideElement(scrollingElement);
    }

    scrollUp$.subscribe(() => {
      scrollUpAction()
    });
    scrollDown$.subscribe(() => {
      scrollDownAction()
    });
  }