用代码滚动cdkScrollable元素的正确方法是什么？

Question

我目前正在开发一个基本上只显示一个巨大列表的网页。为了使用户在页面上有更好的方向，我在vs代码中添加了一个“ minimap”，例如“ minimap”。由于列表中的项目数量众多，因此滚动工作有些滞后，因此我开始寻找替代方法，并发现了this。我将其集成到我的网站中，效果很好。滚动现在像您期望的一样平滑。但是，我现在对“小地图”有疑问。超级la。目前它是这样的：

<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值，并将其基本上设置为“ map”虚拟滚动元素的scrollTop值。这一切都在此处的“ 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元素的正确方法是什么？