向下滚动时隐藏 div，在显示时显示 div

Question

我做了一些研究，刚刚看到窗口滚动事件。如何在 div 滚动事件中实现它？试了很多方法，还是不行。

如果 div(content) 向下滚动隐藏标题，如果 div(content) 向上滚动显示标题。

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));
    }
}

Answer 1

您可以像在普通网站中那样实现这一点，只需要对 DOM 元素的引用，并且可以使用 @ViewChild 来实现：

HTML：

<div #scroller></div>

<div *ngIf="displayDiv"></div>    // Element you want to hide on scroll

TS (Javascript)

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

export class MyComponent implements OnInit {

  @ViewChild('scroller')
  scroller: ElementRef;

  displayDiv = true;

  ngOnInit() {
  
     this.scroller.nativeElement.onscroll = () => {

         let top = this.scroller.nativeElement.scrollTop;

         if (top > 0) {               // We scrolled down
             this.displayDiv = false;
         }
         else {
             this.displayDiv = true;
         }

     }

  }
}