如何在Angular虚拟滚动中使用ngx-perfect-scrollbar替代默认滚动条？

可以实现，核心是把ngx-perfect-scrollbar直接绑定到cdk-virtual-scroll-viewport上，同时处理好原生滚动条隐藏和滚动同步的问题，以下是具体实现步骤：

问题场景 #

我在应用的所有滚动场景中都使用ngx-perfect-scrollbar包，近期出于优化需求切换到了Angular虚拟滚动，但默认滚动条十分影响体验。尝试过将[perfectScrollbar]指令应用于外层div容器，也试过用perfect-scrollbar标签包裹该div，但均未奏效。

原有非虚拟滚动代码 #

<perfect-scrollbar *ngIf="!loading" #scrollbar [config]="horizontalScrollConfig">
  <div style="display: flex;">
    <component *ngFor="let item of items"></component>
  </div>
</perfect-scrollbar>

切换后的虚拟滚动代码 #

<div class="cdk-virtual-scroll-data-source">
  <cdk-virtual-scroll-viewport itemSize="53" orientation="horizontal" class="viewport hidden-scrollbar">
    <component *cdkVirtualFor="let item of items"></component>
  </cdk-virtual-scroll-viewport>
</div>

解决方案 #

1. 调整模板结构，绑定指令到虚拟滚动视口 #

直接将perfectScrollbar指令应用到cdk-virtual-scroll-viewport上，同时保留虚拟滚动的核心配置：

<div class="cdk-virtual-scroll-data-source">
  <cdk-virtual-scroll-viewport 
    itemSize="53" 
    orientation="horizontal" 
    class="viewport"
    [perfectScrollbar]="scrollConfig"
    #scrollbar="perfectScrollbar"
  >
    <component *cdkVirtualFor="let item of items"></component>
  </cdk-virtual-scroll-viewport>
</div>

2. 隐藏原生滚动条 #

添加CSS样式彻底隐藏虚拟滚动视口的原生滚动条，避免和perfect-scrollbar的自定义滚动条冲突：

.viewport::-webkit-scrollbar {
  display: none;
}
.viewport {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}

3. 配置perfect-scrollbar适配水平滚动 #

在组件类中定义滚动配置，适配水平虚拟滚动的需求：

import { Component, ViewChild } from '@angular/core';
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';

@Component({
  // ... 组件元数据
})
export class YourComponent {
  // 适配水平滚动的配置
  scrollConfig = {
    suppressScrollX: false,
    suppressScrollY: true,
    wheelPropagation: false, // 阻止滚动事件冒泡到父容器
    useBothWheelAxes: true // 支持鼠标滚轮控制水平滚动
  };

  @ViewChild('scrollbar') scrollbar!: PerfectScrollbarDirective;

  // 当虚拟滚动数据更新后，触发滚动条重新计算
  onItemsUpdated() {
    // 用setTimeout确保DOM已完成更新
    setTimeout(() => {
      this.scrollbar.update();
    });
  }
}

4. 同步虚拟滚动数据更新与滚动条状态 #

由于虚拟滚动会动态加载/卸载内容，每次items数据变化后，需要调用scrollbar.update()让perfect-scrollbar重新计算滚动区域尺寸，确保滚动条显示正常。

为什么之前的方法无效？ #

• 绑定到外层div：滚动的实际容器是cdk-virtual-scroll-viewport，外层div没有滚动行为，所以perfect-scrollbar无法监听和控制滚动。
• 用perfect-scrollbar包裹viewport：虚拟滚动的视口尺寸计算依赖自身容器，外层的perfect-scrollbar会干扰视口的尺寸判断，导致虚拟滚动逻辑失效，同时滚动事件的传递也会出现异常。

内容的提问来源于stack exchange，提问作者qlabfgerkaSmurf