Angular5 自定義scrollbar樣式之 ngx-malihu-scrollbar

簡介

此插件是 Malihu jQuery Scrollbar 爲了在 Angular2+ 環境下使用，封裝的一個ts的版本。提供directive和service。

從安裝量來看，它比不過 perfect-scrollbar，因此我最後也沒用它。可是也記錄一下用法，萬一之後要用呢！

安裝

npm install ngx-malihu-scrollbar --save

我當時安裝的版本是 `7.0.0`。

添加須要的css和script

這個插件是依賴jQuery的。

在_angular-cli.json中添加

"styles": [
                "../src/scss/styles.scss",
                
                "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"
            ],
    "scripts": [
                "../node_modules/jquery/dist/jquery.min.js",
                
                "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"
            ],

在tsconfig.app.json添加

{
  "compilerOptions": {
    ...
    "types": [
+     "jquery",
+     "mcustomscrollbar"
    ]
  },
  ...
}

使用

在根module中引入

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
+ import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
 
import { HomeComponent } from './home.component';
 
@NgModule({
  imports: [
    CommonModule,
+   MalihuScrollbarModule.forRoot(),
  ],
  declarations: [HomeComponent],
})

模板中使用

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

component中配置options

+ import { MalihuScrollbarService } from 'ngx-malihu-scrollbar';

+ public scrollbarOptions: any = { axis: 'y', theme: 'my-theme'};
constructor(
        private _router: Router,
        private mScrollbarService: MalihuScrollbarService,
    ) {

    }

// 更新

setTreeContentHeight() {
       ...
       // caculate height

       // update scroll
       this.mScrollbarService.update('#scrollContainer');
      
}

自定義的主題樣式

在 styles.css 中自定義樣式

.mCS-my-theme.mCSB_scrollTools{
    .mCSB_dragger{
        .mCSB_dragger_bar{ background-color: #DEDEE4 !important; }
    } 
    .mCSB_draggerRail{ background-color: transparent !important; }
}

使用感覺：沒有perfect-scrollbar流暢，每次滾動條出現時，會先出現瀏覽器的默認滾動條，而後才渲染出自定義的滾動條，不完美。故，棄用之~