Блог

Я хочу реализовать прослушиватель прокрутки для своего сайта с помощью rxjs. В настоящее время прослушиватель выдает каждое число scrollY. Возможно ли реализовать прослушиватель прокрутки, который выдает только позицию прокрутки, если число больше, чем раньше, БЕЗ СОХРАНЕНИЯ СВОЙСТВА STATEFULL. Я хотел бы решить это только с помощью операторов. Текущая реализация выглядит следующим образом:

   public lastScrolledHeight: number = 0;
  ...
  public ngOnInit() {
    this.listenForScroll()
      .subscribe(scrollHeight => {
        this.showAddButton = this.lastScrolledHeight >= scrollHeight; // true or false
        this.lastScrolledHeight = scrollHeight;
      });
  }

  private listenForScroll(): Observable<number> {
    return fromEvent(window, 'scroll').pipe(
      debounceTime(25),
      map((e: any) => e.path[1].scrollY)
    );
  }
 

подсказки

Одним из подходов уже может быть добавление startsWith(0) оператора. Это приведет к тому, что начальная позиция будет равна 0. Но если scan() filter() или reduce() поможет, я не могу сказать.

usecase

Я прокручиваю вниз до Y = 300. должно быть выдано 300. Я прокручиваю до Y = 50. Ничего не должно выдаваться. Я снова прокручиваю вниз до 150, должно быть выдано 150.

Вы можете использовать scan оператор вместе с distinctUntilChanged :

 return fromEvent(window, 'scroll').pipe(
  debounceTime(25),
  map((e: any) => e.path[1].scrollY),
  scan((prev, curr) => Math.max(prev, curr), 0),
  distinctUntilChanged()
)
 

Что происходит, так это то, что наблюдаемое изменяется, чтобы содержать максимальное значение текущей и предыдущей итерации (и имеет значение 0 в качестве начального значения).

После этого проверяется, distinctUntilChanged() что наблюдаемые повторяющиеся события не генерируются.

Это гарантирует, что вы будете получать только значения, которые больше предыдущего.

Я думаю, вы могли бы использовать для этого попарно:

 source$.pipe(
  startWith(-1),
  pairwise(),
  switchMap(([a,b])=>
    b > a
    ? of(b)
    : EMPTY
  )
)
 

Проверьте этот код на игровой площадке

Надеюсь, это поможет

Хотя я так благодарен за помощь @Kos и @Daniel за то, что они потратили время, чтобы помочь мне найти чистое решение, я нашел подход, который является чистым и простым.

 fromEvent(document, 'scroll').pipe(
      debounceTime(50),
      // get scrollY
      map((e: any) => e.path[1].scrollY),
      startWith(0),
      distinctUntilChanged(),
      // map the last scroll values into an array
      pairwise(),
      // returns true if delta of prev amp; curr is greaterOrEqual 0 => scroll up
      map(([prev, curr]: Array<number>) => prev - curr >= 0)
    );
 

Будучи неудовлетворенным моим предыдущим подходом, я решил создать пользовательский оператор, который охватывает rxjs.filter и будет использовать предикат для сравнения текущего значения с предыдущим:

 // it will take a predicate to compare values
// by default it will behave as distinctUntilChanged()
const filterChanges = (predicate = ((a,b) => a!==b)) => {
  // store previous value
  let prevValue = void 0;
  return pipe(
    filter((value, index)=>{
      // pass through the first value on stream
      if (index === 0) {
        prevValue = value;
        return value;
      }

      // compare current with prev
      const result = predicate(value, prevValue);
      prevValue = value;
      return resu<
    })
  );
};
 

И тогда это так же просто, как передача компаратора:

 source$.pipe(
  filterChanges((a, b) => a > b)
)
 

Вывод:

Вот пример игровой площадки.

Надеюсь, это поможет