Горизонтальная прокрутка к определенному элементу — обычное требование в приложениях Angular. Если вы хотите выделить конкретный элемент или обеспечить удобство взаимодействия с пользователем, существует несколько методов достижения этой функциональности. В этой статье блога мы рассмотрим несколько подходов к горизонтальной прокрутке элемента в Angular, а также приведем примеры кода.

Метод 1: использование метода ScrollIntoView() JavaScript.
Метод ScrollIntoView() — это встроенная функция JavaScript, которая переносит указанный элемент в область просмотра. В Angular вы можете получить доступ к этому методу с помощью декораторов ElementRef и ViewChild. Вот пример:

import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
  selector: 'app-horizontal-scroll',
  template: `
    <div #scrollContainer >
      <!-- Scrollable content here -->
    </div>
  `
})
export class HorizontalScrollComponent {
  @ViewChild('scrollContainer', { static: false }) scrollContainer: ElementRef;
  scrollToElement(elementId: string) {
    const element = document.getElementById(elementId);
    element.scrollIntoView({ behavior: 'smooth', inline: 'start' });
  }
}

Метод 2: использование модуля прокрутки Angular CDK
Angular CDK (Component Dev Kit) предоставляет мощный модуль прокрутки, который предлагает расширенные функции прокрутки. Используя модуль прокрутки CDK, вы можете легко добиться горизонтальной прокрутки к элементу. Вот пример:

import { Component } from '@angular/core';
import { CdkScrollable, ScrollDispatcher } from '@angular/cdk/scrolling';
@Component({
  selector: 'app-horizontal-scroll',
  template: `
    <div cdkScrollable >
      <!-- Scrollable content here -->
    </div>
  `
})
export class HorizontalScrollComponent {
  constructor(private scrollDispatcher: ScrollDispatcher) {}
  scrollToElement(elementId: string) {
    const element = document.getElementById(elementId);
    const scrollableAncestors = this.scrollDispatcher.getAncestorScrollContainers(element);
    const scrollableContainer = scrollableAncestors[scrollableAncestors.length - 1] as CdkScrollable;
    if (scrollableContainer) {
      scrollableContainer.scrollTo({ left: element.offsetLeft, behavior: 'smooth' });
    }
  }
}

Метод 3: использование сторонней библиотеки (например, ngx-scroll-to)
В экосистеме Angular доступны различные сторонние библиотеки, которые предоставляют дополнительные возможности прокрутки. Одной из таких библиотек является ngx-scroll-to. Вот пример того, как его можно использовать для горизонтальной прокрутки:

Установить ngx-scroll-to:

npm install ngx-scroll-to

import { Component } from '@angular/core';
import { ScrollToService, ScrollToConfigOptions } from '@nicky-lenaers/ngx-scroll-to';
@Component({
  selector: 'app-horizontal-scroll',
  template: `
    <div >
      <!-- Scrollable content here -->
    </div>
  `
})
export class HorizontalScrollComponent {
  constructor(private scrollToService: ScrollToService) {}
  scrollToElement(elementId: string) {
    const config: ScrollToConfigOptions = {
      target: elementId,
      axis: 'x',
      duration: 500,
      easing: 'easeOutQuart',
    };
    this.scrollToService.scrollTo(config);
  }
}

В этой статье мы рассмотрели несколько методов горизонтальной прокрутки к элементу в Angular. Мы рассмотрели использование метода ScrollIntoView() JavaScript, модуля прокрутки Angular CDK и сторонней библиотеки, такой как ngx-scroll-to. В зависимости от ваших конкретных требований и предпочтений проекта вы можете выбрать наиболее подходящий подход. Реализуя эти методы, вы можете улучшить взаимодействие с пользователем и создать более интерактивные приложения Angular.