@addapptables/perfect-scrollbar 中文文档教程

Question

ADDAPPTABLES Perfect-scrollbar

滚动浏览器的实用程序

Getting Started

首先，让我们通过 npm 安装包：

选择与您的 Angular 版本相对应的版本：

Angular	@addapptables/perfect-scrollbar
8	2.x
7	1.x

npm i @addapptables/perfect-scrollbar perfect-scrollbar --S

How to use

中导入 AddapptablePerfectScrollbarModule

   import { AddapptablePerfectScrollbarModule } from '@addapptables/perfect-scrollbar';
    @NgModule({
        imports: [AddapptablePerfectScrollbarModule]
    })
    export class AddapptableModule { }

    .menu-scroll-container{
        position: relative; //this property is important
    }

<div addapptablesPerfectScrollbar class="menu-scroll-container">
    ...large content
</div>

在您的模块选项

export interface Options {
    handlers?: string[];
    maxScrollbarLength?: number;
    minScrollbarLength?: number;
    scrollingThreshold?: number;
    scrollXMarginOffset?: number;
    scrollYMarginOffset?: number;
    suppressScrollX?: boolean;
    suppressScrollY?: boolean;
    swipeEasing?: boolean;
    useBothWheelAxes?: boolean;
    wheelPropagation?: boolean;
    wheelSpeed?: number;
  }

<div addapptablesPerfectScrollbar [perfectScrollOptions]="{ wheelPropagation: true }" class="menu-scroll-container">
    ...large content
</div>