Скроллинг до элемента по клику в Angular 4: реализация

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

Сейчас мы введем вас в курс одной из тайн Angular: ViewChild используется для поиска элемента, а scrollIntoView() — для его плавной прокрутки.

import { ViewChild, ElementRef } from '@angular/core';

export class AppComponent {
  @ViewChild('elementRef') element: ElementRef;

  scrollToElement() {
    // Перемещаемся к элементу, наслаждаясь каждым мгновением!
    this.element.nativeElement.scrollIntoView({ behavior: 'smooth' });
  }
}

Просто добавьте в ваш HTML #elementRef — это маяк, который указывает на цель. При клике активируйте scrollToElement(), и страница, словно по волшебству, плавно перемещает вас к нужному элементу.

Подробное объяснение: принципы прокрутки в Angular

Когда требуется организовать переход к другому элементу страницы, прокрутка становится вашим навигационным инструментом. В Angular 4 это реализовано максимально удобно.

Задайте цель: переменная ссылки на шаблон

Чтобы найти нужный элемент, воспользуйтесь символом # в HTML-шаблоне в качестве ключа поиска (например, #elementRef).

<div #elementRef>Целевой элемент</div>
<button (click)="scrollToElement()">Поехали!</button>

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

Контролируйте навигацию: декоратор ViewChild

В вашем компоненте декоратор ViewChild действует как карта, необходимая для безопасного и плавного путешествия по приложению Angular.

Плавная навигация: ScrollIntoView()

Хотите, чтобы прокрутка страницы была плавной и приятной, как по глади воды? В функции scrollIntoView() используйте { behavior: 'smooth'}, чтобы посетители сайта получали удовольствие от каждого перехода.

Почему ScrollIntoView() предпочтительнее, чем window.scrollTo()?

ScrollIntoView() автоматически расчитывает позицию элемента, что делает его удобнее в использовании по сравнению с window.scrollTo(), направляющим нас к цели прокрутки

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

Прокрутка — это небольшое плавное путешествие.

Ваше приложение:

Angular Приложение (⛵): [Главная, О нас, Услуги, Контакты]

Действие пользователя — клик:

Пользователь хочет перейти к "Услугам": [Главная 🖱️ -------> Услуги 🎯]

Результат:

Плавное визуальное переход:
От Главной (🖱️) к ... Услугам (🎯)

Нажатие кнопки переносит пользователя от одного интересующего пункта к другому, подобно путешествию по волнам вашего приложения.

Углубленные аспекты плавной прокрутки

Работа с динамическим содержимым

Прокрутка по динамическим спискам данных или содержимому, меняющемуся в реальном времени, требует особой внимательности. Убедитесь, что целевой элемент уже присутствует в DOM, прежде чем начинать перемещение к нему. Используйте асинхронные потоки для гладкого перехода:

<li *ngFor="#item of items | async" #elementRef>{{ item }}</li>

Отладка маршрутов

Проверяйте координаты прокрутки, фиксируя информацию о произведенных действиях с помощью вывода сообщений в консоль:

scrollToElement() {
  // Команда мостика: начинаем маневр!
  console.log('Попытка прокрутки к элементу...');
  this.element.nativeElement.scrollIntoView({ behavior: 'smooth' });
  // Команда мостика: маневр должен быть выполнен! 🌴
  console.log('Прокрутка должна была произойти!');
}

Безопасная навигация в будущее

Если сейчас мы плывем по морю Angular 4, то что нас ждет в будущем? Возможно, это будет Angular 7, с новыми возможностями. Поэтому старайтесь писать код таким образом, чтобы он был готов к изменениям.

Инструменты для онлайн тестирования

Используйте такие инструменты, как StackBlitz или Plunker, для тестирования своего кода. Убедитесь, что все функции работают правильно до того, как внедрить их в продакшн.

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

1. Метод scrollIntoView() — веб-API MDN — подробная справочная информация о методе scrollIntoView() в JavaScript.
2. Angular — официальная документация Angular по навигации в рамках SPA.
3. Angular University — дополнительные материалы для углубленного изучения Angular.
4. GitHub — mgechev/codelyzer: статический анализ для проектов Angular — лучшие практики и рекомендации Angular.
5. Зоны в Angular — статьи с thoughtram — принципы работы с зонами в Angular.
6. Angular — описание и примеры использования декоратора ViewChild.