代码之家 › 专栏 › 技术社区 › MarcoLe

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

angular css html javascript

MarcoLe · 技术社区 · 6 年前

我实现了一种只在向上滚动时显示按钮的方法:我实现的方式,感觉就像,它需要很多计算,因为逻辑监听每个滚动事件。也许你们中的一些呆子,有比我更好的方法。:) 要求是:当页面最初加载或向上滚动时,该按钮应显示在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

2 回复 | 直到 6 年前

Normunds Kalnberzins 6 年前

您应该将滚动事件转换为可观察的。然后您可以使用 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) {}

或者你可以从事件中创建可观察的

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

如您所见,您可以直接访问窗口对象。阿尔索 showAddButton === true 似乎过多 showAddButton 应该足够好。别忘了退订/完成观察。

MCMatan 6 年前

我会加一个小的 缓冲区

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

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