Angular hide div on scroll down, show div on show up

  angular, angular11, ionic-framework

I have make some research, just saw on window scroll event.
anyone have idea to make it on div scroll event?
i have tried many method, still can’t make it.
i have been stuck for few days.

If the div(content) scroll down hide header,
if the div(content) scroll up show header.
Hope someone can help me to solve this issue, Thank you very much

HTML

<header *ngIf="scroll">
    <app-toolbar (OpenDrawer)="OpenDrawer()"></app-toolbar>
    </header>
<div class="app-body">
    <content  scrollEvents="true" scrolling>
        <router-outlet></router-outlet>
    </content>
</div>

TS

import ...
...
enum VisibilityState {
  Visible = 'visible',
  Hidden = 'hidden'
}

enum Direction {
  Up = 'Up',
  Down = 'Down'
}

@Component
...
export class TabLayout implements OnInit {
...
    @Input() stickyHeader = false;
    scroll() {
        const scroll$ = fromEvent(this.el.nativeElement, 'scroll').pipe(
          throttleTime(10),
          map(() => this.el.nativeElement.pageYOffset),
          pairwise(),
          map(([y1, y2]): Direction => (y2 < y1 ? Direction.Up : Direction.Down)),
          distinctUntilChanged(),
          share()
        );

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

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

        scrollUp$.subscribe(() => (this.isVisible = true));
        scrollDown.subscribe(() => (this.isVisible = false));
    }
}

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.