bug of perfect scrollbar is fixed

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html

@@ -25,7 +25,6 @@
   class="search-result"
   style="overflow: auto;"
 >
-  <perfect-scrollbar>
   <ucap-group-expansion-panel
     #groupExpansionPanel
     [groupBuddyList]="groupBuddyList$ | async"
@@ -45,7 +44,6 @@
     >
     </ucap-profile-user-list-item>
   </ucap-group-expansion-panel>
-  </perfect-scrollbar>
 </div>
 <div [style.display]="isShowSearch ? 'block' : 'none'" class="search-result">
   <div *ngIf="searchProcessing">

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html

@@ -12,14 +12,12 @@
 </div>
 <div class="oraganization-tab">
   <div class="oraganization-tab-tree">
-    <perfect-scrollbar>
     <ucap-organization-tree
       [oraganizationList]="departmentInfoList$ | async"
       [loginRes]="loginRes"
       (selected)="onSelectedOrganization($event)"
       class="tab-tree-frame"
     ></ucap-organization-tree>
-    </perfect-scrollbar>
   </div>
   <div class="select-list">
     <dl class="select-dept text-accent-color">
@@ -47,8 +45,7 @@
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
     <div *ngIf="!isShowSearch" class="search-list">
-      <perfect-scrollbar>
+      <cdk-virtual-scroll-viewport itemSize="20" perfectScrollbar fxFlexFill>
-        <cdk-virtual-scroll-viewport itemSize="20" fxFlexFill>
         <ucap-profile-user-list-item
           *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
           [userInfo]="userInfo"
@@ -61,7 +58,6 @@
           Loading...
         </ucap-profile-user-list-item>
       </cdk-virtual-scroll-viewport>
-      </perfect-scrollbar>
       <!-- <ucap-profile-user-list-item
         *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
         [userInfo]="userInfo"
@@ -74,7 +70,11 @@
       </ucap-profile-user-list-item> -->
     </div>
     <div *ngIf="isShowSearch" class="search-result">
-      <cdk-virtual-scroll-viewport itemSize="20" style="height: 100%;">
+      <cdk-virtual-scroll-viewport
+        itemSize="20"
+        perfectScrollbar
+        style="height: 100%;"
+      >
         <ucap-profile-user-list-item
           *cdkVirtualFor="let userInfo of searchUserInfos"
           [userInfo]="userInfo"

projects/ucap-webmessenger-app/src/styles.scss

@@ -1,3 +1,5 @@
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+
 @import '~@ucap-webmessenger-scss/ui/ucap-ui';
 
 @import 'assets/scss/ucap';

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -1,4 +1,9 @@
-<cdk-virtual-scroll-viewport #cvsvGroup itemSize="80" fxFlexFill>
+<cdk-virtual-scroll-viewport
+  #cvsvGroup
+  itemSize="80"
+  perfectScrollbar
+  fxFlexFill
+>
   <ng-container
     *cdkVirtualFor="let node of dataSource.expandedData$"
   ></ng-container>

projects/ucap-webmessenger-ui-group/src/lib/ucap-ui-group.module.ts

@@ -12,6 +12,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTreeModule } from '@angular/material/tree';
 
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { ExpansionPanelComponent } from './components/expansion-panel.component';
 import { ExpansionPanelItemDirective } from './directives/expansion-panel-item.directive';
@@ -34,7 +35,9 @@ const SERVICES = [];
     MatIconModule,
     MatTreeModule,
     MatCheckboxModule,
-    MatRippleModule
+    MatRippleModule,
+
+    PerfectScrollbarModule
   ],
   exports: [...COMPONENTS, ...DIRECTIVES],
   declarations: [...COMPONENTS, ...DIRECTIVES],

projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html

@@ -1,4 +1,9 @@
-<cdk-virtual-scroll-viewport #cvsvOrganization itemSize="40" fxFlexFill>
+<cdk-virtual-scroll-viewport
+  #cvsvOrganization
+  itemSize="40"
+  perfectScrollbar
+  fxFlexFill
+>
   <ng-container
     *cdkVirtualFor="let node of dataSource.expandedData$"
   ></ng-container>

projects/ucap-webmessenger-ui-organization/src/lib/ucap-ui-organization.module.ts

@@ -14,6 +14,8 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTreeModule } from '@angular/material/tree';
 
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
 import { TenantSearchComponent } from './components/tenant-search.component';
 import { TreeComponent } from './components/tree.component';
 
@@ -33,7 +35,9 @@ const SERVICES = [];
     MatIconModule,
     MatInputModule,
     MatSelectModule,
-    MatTreeModule
+    MatTreeModule,
+
+    PerfectScrollbarModule
   ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS]