Angular5 自定义scrollbar样式之 ngx-perfect-scollbar

版本

• angular 5.0
• ngx-perfect-scrollbar ^5.3.5

为什么不用 ngx-perfect-scrollbar 最新的版本 v7 呢？

因为它报错啊！！！ 每次init的时候，就报一个Object() is not a function。 根据GitHub上热心网友的建议，就downgrade了。

详见：https://github.com/zefoy/ngx-perfect-scrollbar/issues/189

安装

npm 安装没啥好说的

npm install --save ngx-perfect-scrollbar@^5.0.0

使用

1. 导入module

// app.module.ts
import { PerfectScrollbarModule, PerfectScrollbarConfigInterface, PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';

const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  wheelPropagation: true
};

@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    ...
  ],
  imports: [
    ...,
    PerfectScrollbarModule
  ],
  exports: [
  ],
  providers: [
    {
      provide: PERFECT_SCROLLBAR_CONFIG,
      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
    }
  ]
})
export class AppModule {}

Providing the global configuration is optional and when used you should only provide the configuration in your root module.

提供全局配置是可选的，但是如果你需要使用，那么只需要在应用的root module中配置。

2. 在模板中使用

API 提供了两种使用方式，一种是 Component 使用方式，一种是 Derective使用方式。我在项目中用的后者。

<ul *ngIf="nodeList.length" class="indented mTop scroll"  [style.max-height.px]="treeContentHeight" [perfectScrollbar]="config">
        <li class="no_line" *ngFor="let node of nodeList"></li>
</ul>                

import { PerfectScrollbarConfigInterface, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';

public config: PerfectScrollbarConfigInterface = {};
@ViewChild(PerfectScrollbarDirective) directiveRef?: PerfectScrollbarDirective;

3. 导入CSS

// styles.scss
@import '~perfect-scrollbar/css/perfect-scrollbar.css';

效果：

遇到的问题

上中下结构中，只让 content部分有滚动条，但是路由跳转后，滚动条的高度没有重新计算。

解决方案：

// home.component.html
<div class="container">
    <div class="header">
        <app-header></app-header>
    </div>
    <div class="content" [perfectScrollbar]="config">
        <router-outlet></router-outlet>
    </div>
    <div class="footer">
        <app-footer></app-footer>
    </div>
</div>

在路由跳转后，需要调用update()更新scrollbar的size 和 position

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

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
    public config: PerfectScrollbarConfigInterface = {};
    @ViewChild(PerfectScrollbarDirective) directiveRef?: PerfectScrollbarDirective;
    constructor(public _router: Router) { }

    ngOnInit() {
        this._router.events.subscribe((event) => {
            // update the scrollbar
            this.directiveRef.update();
          });
    }

}