手工业 完美滚动栏

用于用 perfect-scrollbar 增强滚动条的用户指令 .

开始

要开始,让我们通过 npm 安装软件包:

选择对应您的 Angular 版本的版本 :

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

兼容性

目前版本: 7.0.1 (与Angular v19相容)

如何使用

在组件中使用独立的指令

import { Component } from '@angular/core';
import { PerfectScrollbarDirective } from '@craftsjs/perfect-scrollbar';

@Component({
    selector: 'app-example',
    standalone: true,
    imports: [PerfectScrollbarDirective],
    template: `
        <div perfectScrollbar class="menu-scroll-container">
            ...large content
        </div>
    `
})
export class ExampleComponent {}

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

<div perfectScrollbar 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 perfectScrollbar [perfectScrollOptions]="{ wheelPropagation: true }" class="menu-scroll-container">
    ...large content
</div>