Как правильно прокрутить элемент cdkScrollable с кодом? - PullRequest
Новая
       7

Как правильно прокрутить элемент cdkScrollable с кодом?

0 голосов
/ 05 марта 2019

Я сейчас занимаюсь разработкой веб-страницы, которая в основном просто отображает огромный список. Чтобы дать пользователю лучшую ориентацию на странице, я добавил «миникарту», ​​такую ​​как в коде. Прокрутка была несколько запаздывающей из-за количества элементов в списке, поэтому я начал искать альтернативы и нашел это . Я интегрировал его в свой сайт, он отлично работает. Прокрутка теперь так же плавна, как и следовало ожидать. Однако у меня сейчас проблема с «миникартой». Это супер лагги. В настоящее время это работает так: 

<div #safetyDiv id="safetyDiv">
  <cdk-virtual-scroll-viewport #vsvSafety itemSize="" (scroll)="onScrollSafety($event)">
    <ul class="timeline">
      <li *cdkVirtualFor="let message of guiMessages; let i = index; trackBy: trackByFn">
        <timeLineItem [guiMessage]="message"></timeLineItem>
      </li>
    </ul>
</cdk-virtual-scroll-viewport>

</div>
<div #map id="map" >
  <cdk-virtual-scroll-viewport #vsvMap itemSize="">
    <ul class="timeline">
      <li *cdkVirtualFor="let message of guiMessages; let i = index">
        <timeLineItem [guiMessage]="message"></timeLineItem>
      </li>
    </ul>
 </cdk-virtual-scroll-viewport>

Когда прокручивается виртуальный элемент прокрутки внутри «safetyDiv», я беру значение scrollTop элемента и в основном устанавливаю его как значение scrollTop виртуального элемента прокрутки «map». Все это происходит в методе «onScrollSafety» здесь: 

let maxScrollValueSafety = this.niSafety.scrollHeight - this.niSafety.clientHeight;
let maxScrollValueMap = this.niMap.scrollHeight - this.niSafety.clientHeight;

let x = this.niSafety.scrollTop / maxScrollValueSafety;
this.niMap.scrollTop = maxScrollValueMap;

Пока все это работает так, как задумано. Единственная проблема, которая у меня сейчас есть, заключается в том, что прокрутка на миникарте супер лаги, а не плавная. Я думаю, все это сводится к следующему вопросу: как правильно прокрутить элемент cdkScrollable с кодом?

...