向下滚动时的角度隐藏按钮/向上滚动时显示答案

【问题标题】：Angular hide button on down-scroll/ show on up-scroll向下滚动时的角度隐藏按钮/向上滚动时显示
【发布时间】：2019-02-09 21:19:44
【问题描述】：

我已经实现了一种仅在向上滚动时显示按钮的方法：我的实现方式，感觉就像，它需要进行许多计算，因为逻辑会监听每个滚动事件。也许你们中的一些书呆子，有比我更好的方法。 :) 要求是：当页面最初加载或向上滚动时，按钮应显示在 UI 中。向下滚动时，该按钮应被隐藏。

我使用 Angulars @HostListener(..) 来监听滚动事件。

组件

  public lastScrolledHeight: number = 0;
  public showAddButton: boolean = true;

  @HostListener('window:scroll', ['$event']) onScroll(event) {
    const window = event.path[1];
    const currentScrollHeight = window.scrollY;
    console.log(currentScrollHeight);

    if (currentScrollHeight > this.lastScrolledHeight) {
      this.showAddButton = false;
      console.log('should NOT show button');
    } else {
      this.showAddButton = true;
      console.log('should show button');
    }
    this.lastScrolledHeight = currentScrollHeight;
  }

HTML

  <button class="btn btn-success btn-circle btn-xl"
          [ngClass]="(showAddButton === true) ? 'scale-in' : 'scale-out'"
  </button>

为了完成CSS：

.scale-out {
  -webkit-animation: scale-out .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: scale-out .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.scale-in {
  -webkit-animation: scale-in .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: scale-in .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

期待任何输入。 :)

编辑：我创建了一个 Stackblitz 用于测试

Stackblitz

【问题讨论】：

标签： javascript html css angular

【解决方案1】：

您应该将滚动事件转换为 Observable。然后你可以使用debounceTime控制处理。

你可以添加一个主题，传递滚动信息，然后执行你的逻辑

  scroll = new Subject<number>();
  ngOnInit() {
    this.scroll
      .pipe(debounceTime(200))
      .subscribe((y) => this.dealWithScroll(window.scrollY));
  }
  ngOnDestroy() {
    this.scroll.complete();
  }
  @HostListener('window:scroll') watchScroll() {
    this.scroll.next(window.scrollY);
  }
  dealWithScroll(y: number) {}

或者你可以从事件创建 Observable

  scroller: Subscription;
  ngOnInit() {    
    this.scroller = fromEvent(window, 'scroll')
      .pipe(debounceTime(200))
      .subscribe(() => this.dealWithScroll(window.scrollY));      }
  ngOnDestroy() {
    this.scroller.unsubscribe();
  }

如您所见，您可以直接访问窗口对象。同样showAddButton === true 似乎过度showAddButton 应该足够好。不要忘记取消订阅/完成 Observable。

【讨论】：

哇，这是一个非常先进和书呆子的方法。完全喜欢可观察流和调度程序（debouncetime() 运算符）的实现。

【解决方案2】：

我会添加一个小的缓冲区

这将使应用程序的触摸敏感度降低，并且需要更少的计算。

export class AppComponent {
  public lastScrolledHeight: number = 0;
  public showAddButton: boolean = true;
  private buffer = 0

  @HostListener('window:scroll', ['$event']) onScroll(event) {
    const window = event.path[1];

    if (this.ignoredByBuffer()) {
      return;
    }

    const currentScrollHeight = window.scrollY;

    if (currentScrollHeight > this.lastScrolledHeight) {
      this.showAddButton = false;
      console.log('should NOT show button');
    } else {
      this.showAddButton = true;
      console.log('should show button');
    }
    this.lastScrolledHeight = currentScrollHeight;
  }

  private ignoredByBuffer(): boolean {
    if (this.buffer < 10) {
      this.buffer += 1;
      return true;
    }
    this.buffer = 0;
    return false;
  }
}

【讨论】：