Scroll direction — sticky header

Паттерн

Sticky header в мобильных приложениях: скроллим вниз — header скрывается, чтобы дать место контенту. Скроллим вверх — возвращается. Нам нужен поток «направление scroll», а не поток координат.

Какую проблему решаем

Каждый scroll event — это сотни пиксельных дельт в секунду. Реагировать на каждое — головокружение и лаги. Императивные prevY/currentY-переменные дублируются по разным компонентам и легко рассинхронизируются.

Операторы и зачем они нужны

• throttleTime — снижаем частоту scroll-событий.
• pairwise — отдаёт пару [предыдущая, текущая] позиции без внешней переменной.
• map(([prev, curr]) => curr > prev ? 'down' : 'up') — превращаем разность в направление.
• distinctUntilChanged — пропускаем только смену направления.

Подводные камни

• debounceTime вместо throttle — направление будет обновляться только после остановки scroll. Header будет «отставать».
• Без distinctUntilChanged header получит сотню одинаковых down подряд и change detection захлебнётся.
• Не забудьте начальную позицию (0), иначе первый scroll-event не имеет с чем сравниться.