Обработка события onscroll в Angular 2: с примерами кода

Быстрый ответ

Вам понадобится метод addEventListener, применимый к объекту окна или любому прокручиваемому элементу. Приведем просто пример использования этого метода:

window.addEventListener('scroll', () => console.log('Прокрутка произошла!'));

С помощью addEventListener вы указываете функцию обратного вызова, которая выполняется при каждом событии прокрутки. Чтобы следить за прокруткой конкретного элемента, window замените на переменную, представляющую этот элемент.

В Angular для отслеживания событий прокрутки примените декоратор @HostListener:

@HostListener('window:scroll', ['$event'])
onWindowScroll(event) {
    // И начинается танцевальное движение под 'Eye of the Tiger'...
}

Для отслеживания прокрутки специфичных элементов используйте привязку к событию (scroll):

<div (scroll)="onScroll($event)">...</div>

В контексте Angular-компоненты эта ситуация выглядит как:

onScroll(event) {
    // Есть, молиться, скроллить, повторять!
}

Подробное руководство по отслеживанию событий прокрутки

События прокрутки — это важный инструмент в сфере веб-разработки, который позволяет следить за взаимодействием пользователя с веб-сайтом. Давайте посмотрим, как их можно использовать на практике:

Ловля событий прокрутки в Angular: @HostListener

@HostListener('window:scroll', ['$event'])
onWindowScroll(e) {
    const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    console.log(`Событие прокрутки отслежено! Позиция скролла: ${scrollPosition}`);
    // Напоминание о важности активности: скроллим и делаем физические упражнения!
}

Подробнее об этом расскажет наш спикер на видео

Взаимодействие с DOM: @ViewChild и ElementRef

@ViewChild('scrollableElement', {static: true}) scrollableRef: ElementRef;

ngAfterViewInit() {
    this.scrollableRef.nativeElement.addEventListener('scroll', this.onScroll.bind(this));
    // Проникаем в мир DOM с покоями Angular.
}

Сага RxJS: Реактивное слежение за прокрутками

fromEvent(window, 'scroll')
  .pipe(
    map(() => window.pageYOffset),
    distinctUntilChanged(),
    filter(position => position > 100)
  )
  .subscribe(() => console.log('События прокрутки обнаружены во время осмотра!'));

Применение RxJS позволяет получить больший контроль и рост производительности, особенно в условиях сложных приложений.

Визуализация

Суша = 🌄         // Ваш контент
Море = 🌊         // Прокрутка пользователя

Маяк (🚨):        // Ваша функция отслеживания прокрутки
"Все под контролем, следим за контентом"

Когда поток моря (прокрутка) достигает маяка:

window.addEventListener('scroll', function() {
  console.log('Ахой! Замечена прокрутка 🚨');
});

Маяк (функция отслеживания) выдает сигнал:

🌊🚤 -> 🚨 -> 📟 "Капитан, обнаружено новое событие прокрутки!"

Ключевой идеей, переданной через визуализацию, является беспрестанный мониторинг "моря" вашего контента, отмечая каждую "волну" прокрутки.

Поднимаем уровень: Углубленное слежение за прокруткой

Задачи, такие как настройка обработчиков событий, отслеживание позиций прокрутки для разных целей (например, инфинити-скролл или динамическое обновление UI), а также использование методов очистки для предотвращения утечек памяти, расширяют ваше понимание механизма отслеживания событий прокрутки.

Пребывание на чеку с айсбергами: Полезные советы и возможные препятствия

С помощью событий прокрутки навигация по сайту может претерпеть определенные сложности. Например, события с высокой частотой могут привести к снижению производительности. Применение техник debouncing и throttling помогает предотвратить такие нежелательные эффекты. Рассмотрите также использование API Intersection Observer для отслеживания видимости элементов и операторов RxJS типа throttleTime, auditTime или sampleTime, чтобы сгладить нестабильное поведение событий прокрутки.

Не забудьте о навигационных утилитах

Среди ваших инструментов должны быть такие, как window.pageYOffset для слежения за положением скролла, @ViewChild для поиска элементов и RxJS fromEvent для создания эффективного потока данных.

Полезные материалы

1. Document: scroll event – Web APIs | MDN — бесценное руководство по событию scroll и его реализации в JavaScript.
2. Scroll Page Horizontally With Mouse Wheel | CSS-Tricks – CSS-Tricks — изучите плагин jQuery для горизонтальной прокрутки с использованием собственных событий прокрутки.
3. javascript – Check if a user has scrolled to the bottom (not just the window, but any element) – Stack Overflow — обсуждение на Stack Overflow о способах определения, достигла ли прокрутка нижней части элемента.
4. Debouncing and Throttling Explained Through Examples | CSS-Tricks – CSS-Tricks — оптимизация событий прокрутки с помощью методов debouncing и throttling.
5. Bubbling and capturing — подробное изложение механизма распространения событий, включая фазы всплывания и перехвата, связанными с событиями прокрутки.
6. Improving scroll performance with passive event listeners | Blog | Chrome for Developers — как применение пассивных обработчиков событий может улучшить производительность в приложениях с активной прокруткой.
7. Trust is good, observation is better: Intersection Observer v2 | Articles | web.dev — введение в API Intersection Observer как в сильную альтернативу традиционному следованию за прокруткой.