RxJs 监听滚动并首先发射两个方向

Question

我需要在我的应用程序中实现变形浮动按钮功能。

我已经创建了所需的 CSS 类，现在我需要监听元素滚动才能应用一些样式。

我已经按照如下方式实现了它，并且效果很好：

fromEvent(scrollableElement, 'scroll')
.pipe(untilDestroyed(this), debounceTime(100))
.subscribe(() => {
     const currentScrollPos = scrollableElement.scrollTop;

     buttonTextElement.classList.toggle('d-none', prevScrollPos < currentScrollPos);

     prevScrollPos = currentScrollPos;
});

现在我试图从性能的角度来改进它，我在考虑以下场景：

听滚动
向下滚动时只进行第一次发射，然后跳过其余部分直到向上滚动
只接受向上滚动的第一次发射并跳过其余部分直到向下滚动
重复

是否有可能使用 RxJs 运算符来做到这一点？

Answer 1

您可以尝试使用 distinctUntilChanged，如下所示。 observable 将发出 Up 或 Down 并且仅当方向改变时。

lastScrollTop: number = 0;

ngOnInit() {
  fromEvent(window, 'scroll')
    .pipe(
      untilDestroyed(this),
      debounceTime(100),
      map(() => {
        let st = window.pageYOffset || document.documentElement.scrollTop;
        let diff = st - this.lastScrollTop;
        this.lastScrollTop = st <= 0 ? 0 : st;
        return diff >= 0 ? 'Down' : 'Up';
      }),
      distinctUntilChanged()
    )
    .subscribe((scrollDirection) => {
      console.log('Scroll Direction:',scrollDirection);
    });
}

RxJs 监听滚动并首先发射两个方向

RxJs listen to scroll and take first emit of both directions

rxjs

typescript

angular