Question

我在水平面上并排有两张垫子

左边的那个是实现＆＃34;固定＆＃34;列，右边的列可以垂直和水平滚动。

我现在想要同步两个表格的滚动，因为左边的一个没有滚动条而右边的滚动条是

我希望正确的滚动始终自动应用于左侧滚动。

这样男性看起来就像是一张固定在左边的列的单个表。

我在这里问这个问题是因为我找到的解决方案非常＆＃34; jquery＆＃34;例如：Synchronized scrolling using jQuery?

到目前为止，我一直努力成为＆＃34; Google标准＆＃34;因为它进入我的角度6项目。我的代码是非常ECMAScript和角度导向我很少甚至没有jquery。

我担心性能和我使用的任何代码最终没有跟上并最终打破幻觉。

是jquery真的是最好的方法吗？

更新1：

到目前为止，我已经（DOM）：

<!--1-->
      <mat-table #table1 [dataSource]="dataSource" matSort class="pinned catching-scrolling">
<--lots of dom...-->
<!--2-->
      <mat-table #table2 [dataSource]="dataSource" matSort class="unpinned" (scroll)="syncScroll(table2)">
<--more dom...-->

ts：

  syncScroll(div){
    const d1 = this.element.nativeElement.querySelector('.catching-scrolling');
    console.log(d1 , div);
    d1.scrollTop = div.scrollTop;
  }

现在所有这些：#table2 (scroll)="syncScroll(table2)"，(scroll)="syncScroll(element)"，(scroll)="syncScroll($event)"都非常好，因为它们确实发送了我理论上可以同步的元素，但我只想清理它以便我的dom已经发送了正确的东西，我可以从中指向scrollTop或两者的喜欢。

现在我两者都有不同的项目。

更新2

(scroll)="syncScroll($event.srcElement)发送回正确的元素，这使得滚动条实际上同步的代码最少：）

现在问题仍然存在：使用jquery（即使是以这种Angular-ish方式）最快，最优化的解决方案？

Answer 1

所以这就是我所拥有但不满意的地方：

问题是浏览器支持和perf，在chrome或edge上它工作正常但是如果我去firefox，我的代码完全失败加上我有滚动条。

加上边缘有延迟，所以也许我的想法是这个代码是不正确的。

ts：

open(44, file='Temperature-imax50.txt')

html：

  leftS;
  rightS;
  leftTimeout;
  rightTimeout;
  syncScrollRightBeingCalled = false;
  syncScrollLeftBeingCalled = false;

  constructor(
    private element: ElementRef) {
    this.dataSource = new MatTableDataSource();
  }

  ngAfterViewInit() {
    this.leftS = this.element.nativeElement.querySelector('.catching-scrolling-left');
    this.rightS = this.element.nativeElement.querySelector('.catching-scrolling-right');
  }

  syncScrollLeft(div){
    clearTimeout(this.leftTimeout);
    if(!this.syncScrollRightBeingCalled){
      this.syncScrollLeftBeingCalled = true;
      this.leftS.scrollTop = div.scrollTop;
    }
    this.leftTimeout = setTimeout(() => this.syncScrollLeftBeingCalled = false, 25);
  }
  syncScrollRight(div){
    clearTimeout(this.rightTimeout);
    if(!this.syncScrollLeftBeingCalled) {
      this.syncScrollRightBeingCalled = true;
      this.rightS.scrollTop = div.scrollTop;
    }
    this.rightTimeout = setTimeout(() => this.syncScrollRightBeingCalled = false, 25);
  }

css：

<mat-table #table1 [dataSource]="dataSource" matSort class="pinned catching-scrolling-right" (scroll)="syncScrollLeft($event.srcElement)">
<mat-table #table2 [dataSource]="dataSource" matSort class="unpinned catching-scrolling-left" (scroll)="syncScrollRight($event.srcElement)">

我发现了这个：http://jsfiddle.net/qqPcb/

但它只是拒绝适用于我的情况。

我只是无法在所包含的div上滚动100％的浏览器。

Angular 6 Mat Tables同步滚动

1 个答案: