Question

我有一个演示here

我正在抓取一个元素的scrollLeft，因为它已滚动。

是否可以使用scrollLeft号码更新第二个div，以便div同时向左和向右滚动？

元素必须是分开的，但我需要它们一起滚动。

或者在Angular中有更简单的方法。

我使用jQuery在Angular之外工作，但我不想在Angular中使用jQuery。

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

您可以获得对第二个<div>的引用，并将其向左滚动到相同的数量：

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

如果您希望组件中有更复杂的逻辑来管理滚动量应该是什么，您可以通过@ViewChild获取对两个DOM节点的引用：

<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;
  }
}

Answer 2

Angular CDK现在提供cdkScrollable and 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) {}

角4滚动两个单独的元素togther

2 个答案: