Угловая прокрутка синхронизации 6 Mat Tables - PullRequest
Новая
       8

Угловая прокрутка синхронизации 6 Mat Tables

0 голосов
/ 31 мая 2018

У меня есть две матовые таблицы рядом в горизонтальной плоскости

одна слева предназначена для материализации "закрепленных" столбцов, вторая справа прокручивается как по вертикали, так и по горизонтали.

Теперь я хочу синхронизировать прокрутку обеих таблиц, так как слева не будет полосы прокрутки, а справа -

. Я хочу, чтобы прокрутка правой всегда применялась автоматическислева.

оба мужчины будут выглядеть как одна таблица с колонками слева.

Я спрашиваю об этом здесь, потому что я нашел только решения, которые очень "jquery"например: Синхронизированная прокрутка с использованием jQuery?

, и до сих пор я стремился быть настолько же «стандартным Google», насколько это возможно в моем проекте angular 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)" довольно хороши, поскольку они отправляют обратно элементы, с которыми я могу теоретически синхронизироваться, но я просто хочу очистить это так, чтобы мой дом былуже отправляю нужную вещь, из которой я могу указать на scrollTop или лайки для обоих.

сейчас у меня есть разные элементы на обоих.

ОБНОВЛЕНИЕ 2

(scroll)="syncScroll($event.srcElement)отправляет обратно правильный элемент, и это обеспечивает минимальный код, при котором полосы прокрутки фактически синхронизируются:)

Теперь остается вопрос: является ли использование jquery (даже в этой манере Angular-ish) самым быстрым и наиболее оптимизированным решением?

1 Ответ

0 голосов
/ 31 мая 2018

Итак, вот что у меня есть, но я не удовлетворен:

Проблемы с поддержкой браузера и перфорированием, на Chrome или Edge это работает нормально, но если я перехожу к Firefox, мой код полностью не работает, плюс у меня естьполоса прокрутки.

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

ts: 

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

html: 

<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)">

css: 

.unpinned{
  height: calc(100vh - 430px);
}
.pinned{
  height: calc(100vh - 447px);
}
.pinned{
  -ms-overflow-style: none;
  overflow: auto;
  width: 560px;
}
.unpinned{
  overflow: scroll;
  flex: 1;
}
/deep/ .pinned::-webkit-scrollbar {
  width: 0;
}

Я нашел это: http://jsfiddle.net/qqPcb/

но он просто отказывается относиться к моему делу.

Я просто потерял возможность прокручивать более 100% браузеров на содержащемся элементе.

...