Угловая 4 прокрутка двух отдельных элементов вместе

Question

У меня есть демо здесь

Я фиксирую scrollLeft одного элемента при его прокрутке.

Можно ли обновить второй div с помощью номера scrollLeft, чтобы оба div прокручивались влево и вправо вместе?

Элементы должны быть отдельными, но мне нужно, чтобы они прокручивались вместе.

Или есть более простой способ сделать это в Angular.

У меня это работало вне Angular с jQuery, но я не хочу использовать jQuery в Angular.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  isNavbarCollapsed = true;

  private scrollLeft: number
  //private scrolLTwo: HTMLElement = 

  onScroll(event: Event) {
    this.scrollLeft = (event.target as HTMLElement).scrollLeft;
    //console.log(this.scrollLeft);
    this.updateScroll();
  }

  updateScroll(){
    //Update second scrolling element
  }
}

Answer 1

Angular CDK теперь предоставляет cdkScrollable и ScrollDispatcher . Просто добавьте директиву cdkScrollable ко всем прокручиваемым элементам, которые необходимо синхронизировать, а затем добавьте эту логику в ваш компонент:

this.scrollDispatcher.scrolled().subscribe((scrollable: CdkScrollable) => {
  const left = scrollable.measureScrollOffset('left');

  Array.from(this.scrollDispatcher.scrollContainers.keys())
    .filter(otherScrollable => otherScrollable && otherScrollable !== scrollable)
    .forEach(otherScrollable => {
      if (otherScrollable.measureScrollOffset('left') !== left) {
        otherScrollable.scrollTo({left});
      }
    });
});

Не забудьте отписаться от этой подписки, когда компонент уничтожен. А также внедрить ScrollDispatcher сервис в конструкторе:

public constructor(private scrollDispatcher: ScrollDispatcher) {}

Answer 2

Вы можете просто получить ссылку на второй <div> и установить его прокрутку влево на ту же сумму:

<div class="container" (scroll)="scrollTwo.scrollLeft = scrollOne.scrollLeft" #scrollOne>
    ...
</div>
<div class="container" #scrollTwo>
    ...
</div>

Если вы хотите иметь более сложную логику в своем компоненте для управления тем, какой должна быть сумма прокрутки, вы можете просто получить ссылку на два узла DOM через @ViewChild:

<div class="container" (scroll)="updateScroll()" #scrollOne>
    ...
</div>
<div class="container" #scrollTwo>
    ...
</div>

@Component(...)
export class AppComponent  {
  @ViewChild('scrollOne') scrollOne: ElementRef;
  @ViewChild('scrollTwo') scrollTwo: ElementRef;

  updateScroll(){
    const scrollOne = this.scrollOne.nativeElement as HTMLElement;
    const scrollTwo = this.scrollTwo.nativeElement as HTMLElement;

    // do logic and set
    scrollTwo.scrollLeft = scrollOne.scrollLeft;
  }
}

Вам не нужно получать ссылки через @ViewChild. Вы могли бы просто передать их в метод, который называется:

<div class="container" (scroll)="updateScroll(scrollOne, scrollTwo)" #scrollOne>
    ...
</div>
<div class="container" #scrollTwo>
    ...
</div>

@Component(...)
export class AppComponent  {
  updateScroll(scrollOne: HTMLElement, scrollTwo: HTMLElement){
    // do logic and set
    scrollTwo.scrollLeft = scrollOne.scrollLeft;
  }
}