Custom perfect-scrollbar directive for better control (replaced the ngx-perfect-scrollbar with fuse-perfect-scrollbar)

src/app/app.module.ts

@@ -9,7 +9,6 @@ import 'hammerjs';
 import { SharedModule } from './core/modules/shared.module';
 import { AppComponent } from './app.component';
 import { ProjectModule } from './main/content/apps/dashboards/project/project.module';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
 import { FuseMainModule } from './main/main.module';
 import { PagesModule } from './main/content/pages/pages.module';
@@ -69,8 +68,6 @@ const appRoutes: Routes = [
 
         InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 0}),
 
-        PerfectScrollbarModule.forRoot(),
-
         FuseMainModule,
 
         ProjectModule,

src/app/core/components/material-color-picker/material-color-picker.component.html

@@ -45,7 +45,7 @@
 
             <div fxLayout="row" fxLayoutWrap
                  fxLayoutAlign="start start"
-                 class="colors" perfectScrollbar>
+                 class="colors" fusePerfectScrollbar>
                 <div class="color"
                      [ngClass]="'md-'+color.key+'-bg'"
                      *ngFor="let color of (colors | keys)"
@@ -63,7 +63,7 @@
              [@slideInRight]>
             <div fxLayout="row" fxLayoutWrap
                  fxLayoutAlign="start start"
-                 class="colors" perfectScrollbar>
+                 class="colors" fusePerfectScrollbar>
                 <div class="color"
                      *ngFor="let hue of hues"
                      [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"

src/app/core/components/shortcuts/shortcuts.component.html

@@ -47,7 +47,7 @@
             </md-input-container>
 
             <md-divider></md-divider>
-            <md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" perfectScrollbar>
+            <md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
 
                 <md-list-item *ngFor="let shortcutItem of shortcutItems"
                               (click)="toggleShortcut($event, shortcutItem)">
@@ -68,7 +68,7 @@
                 </md-list-item>
             </md-nav-list>
 
-            <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" perfectScrollbar>
+            <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
                 <md-list-item *ngFor="let navigationItem of filteredNavigationItems"
                               (click)="toggleShortcut($event, navigationItem)">
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">

src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -0,0 +1,173 @@
+import { AfterViewInit, Directive, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
+import * as Ps from 'perfect-scrollbar';
+import { FuseConfigService } from '../../services/config.service';
+import { Subscription } from 'rxjs/Subscription';
+import { Platform } from '@angular/cdk/platform';
+
+@Directive({
+    selector: '[fusePerfectScrollbar]'
+})
+export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
+{
+    onSettingsChanged: Subscription;
+    isDisableCustomScrollbars = false;
+    isMobile = false;
+    isInitialized = true;
+
+    constructor(
+        private element: ElementRef,
+        private zone: NgZone,
+        private fuseConfig: FuseConfigService,
+        private platform: Platform
+    )
+    {
+        this.onSettingsChanged =
+            this.fuseConfig.onSettingsChanged
+                .subscribe(
+                    (settings) => {
+                        this.isDisableCustomScrollbars = !settings.customScrollbars;
+                    }
+                );
+
+        if ( this.platform.ANDROID || this.platform.IOS )
+        {
+            this.isMobile = true;
+        }
+    }
+
+    ngOnInit(): void
+    {
+
+    }
+
+    ngAfterViewInit(): void
+    {
+        if ( this.isMobile || this.isDisableCustomScrollbars )
+        {
+            this.isInitialized = false;
+            return;
+        }
+
+        this.zone.runOutsideAngular(() => {
+
+            // Initialize the perfect-scrollbar
+            Ps.initialize(this.element.nativeElement);
+        });
+    }
+
+    ngOnDestroy(): void
+    {
+        if ( !this.isInitialized )
+        {
+            return;
+        }
+
+        this.onSettingsChanged.unsubscribe();
+
+        // Destroy the perfect-scrollbar
+        Ps.destroy(this.element.nativeElement);
+    }
+
+    update()
+    {
+        if ( !this.isInitialized )
+        {
+            return;
+        }
+
+        // Update the perfect-scrollbar
+        Ps.update(this.element.nativeElement);
+    }
+
+    destroy()
+    {
+        this.ngOnDestroy();
+    }
+
+    scrollToX(x: number, speed?: number)
+    {
+        this.animateScrolling('scrollLeft', x, speed);
+    }
+
+    scrollToY(y: number, speed?: number)
+    {
+        this.animateScrolling('scrollTop', y, speed);
+    }
+
+    scrollToTop(offset?: number, speed?: number)
+    {
+        this.animateScrolling('scrollTop', (offset || 0), speed);
+    }
+
+    scrollToLeft(offset?: number, speed?: number)
+    {
+        this.animateScrolling('scrollLeft', (offset || 0), speed);
+    }
+
+    scrollToRight(offset?: number, speed?: number)
+    {
+        const width = this.element.nativeElement.scrollWidth;
+
+        this.animateScrolling('scrollLeft', width - (offset || 0), speed);
+    }
+
+    scrollToBottom(offset?: number, speed?: number)
+    {
+        const height = this.element.nativeElement.scrollHeight;
+
+        this.animateScrolling('scrollTop', height - (offset || 0), speed);
+    }
+
+    animateScrolling(target: string, value: number, speed?: number)
+    {
+        if ( !speed )
+        {
+            this.element.nativeElement[target] = value;
+
+            // PS has weird event sending order, this is a workaround for that
+            this.update();
+
+            this.update();
+        }
+        else if ( value !== this.element.nativeElement[target] )
+        {
+            let newValue = 0;
+            let scrollCount = 0;
+
+            let oldTimestamp = performance.now();
+            let oldValue = this.element.nativeElement[target];
+
+            const cosParameter = (oldValue - value) / 2;
+
+            const step = (newTimestamp) => {
+                scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
+
+                newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
+
+                // Only continue animation if scroll position has not changed
+                if ( this.element.nativeElement[target] === oldValue )
+                {
+                    if ( scrollCount >= Math.PI )
+                    {
+                        this.element.nativeElement[target] = value;
+
+                        // PS has weird event sending order, this is a workaround for that
+                        this.update();
+
+                        this.update();
+                    }
+                    else
+                    {
+                        this.element.nativeElement[target] = oldValue = newValue;
+
+                        oldTimestamp = newTimestamp;
+
+                        window.requestAnimationFrame(step);
+                    }
+                }
+            };
+
+            window.requestAnimationFrame(step);
+        }
+    }
+}

src/app/core/modules/shared.module.ts

@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';
 
 import { MaterialModule } from './material.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxDnDModule } from '@swimlane/ngx-dnd';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@@ -18,6 +17,7 @@ import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
 import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
 import { FuseHljsComponent } from '../components/hljs/hljs.component';
+import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
 import { Md2Module } from 'md2';
@@ -31,6 +31,7 @@ import { CookieService } from 'ngx-cookie-service';
         FuseCountdownComponent,
         FuseHljsComponent,
         FuseIfOnDomDirective,
+        FusePerfectScrollbarDirective,
         FuseMaterialColorPickerComponent
     ],
     imports        : [
@@ -39,7 +40,6 @@ import { CookieService } from 'ngx-cookie-service';
         CommonModule,
         FormsModule,
         FusePipesModule,
-        PerfectScrollbarModule,
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
@@ -56,7 +56,7 @@ import { CookieService } from 'ngx-cookie-service';
         FusePipesModule,
         FuseCountdownComponent,
         FuseHljsComponent,
-        PerfectScrollbarModule,
+        FusePerfectScrollbarDirective,
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,

src/app/core/scss/core.scss

@@ -2,8 +2,8 @@
 @import '~@swimlane/ngx-datatable/release/index.css';
 @import '~@swimlane/ngx-datatable/release/themes/material.css';
 @import '~@swimlane/ngx-datatable/release/assets/icons.css';
-// Perfect Scrollbar
-@import "~ngx-perfect-scrollbar/dist/lib/perfect-scrollbar.component.css";
+// Perfect scrollbar
+@import '~perfect-scrollbar/dist/css/perfect-scrollbar.min.css';
 // Fuse
 @import "fuse";
 

src/app/core/scss/partials/_page-layouts.scss

@@ -309,10 +309,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     > .mat-drawer-content {
                         flex: 1 0 auto;
                         max-height: none;
-
-                        > .center {
-                            overflow: hidden;
-                        }
                     }
                 }
             }
@@ -483,10 +479,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     > .mat-sidenav-content,
                     > .mat-drawer-content {
                         flex: 1 0 auto;
-
-                        > .center {
-                            overflow: hidden;
-                        }
                     }
                 }
             }

src/app/core/scss/partials/_scrollbars.scss

@@ -1,20 +1,23 @@
-::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-    background-color: rgba(0, 0, 0, 0);
-}
+body:not(.is-mobile) {
 
-::-webkit-scrollbar:hover {
-    background-color: rgba(0, 0, 0, 0.12);
-}
+    ::-webkit-scrollbar {
+        width: 12px;
+        height: 12px;
+        background-color: rgba(0, 0, 0, 0);
+    }
 
-::-webkit-scrollbar-thumb {
-    border: 2px solid transparent;
-    box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
-    border-radius: 24px;
-}
+    ::-webkit-scrollbar:hover {
+        background-color: rgba(0, 0, 0, 0.12);
+    }
 
-::-webkit-scrollbar-thumb:active {
-    box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
-    border-radius: 24px;
+    ::-webkit-scrollbar-thumb {
+        border: 2px solid transparent;
+        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
+        border-radius: 24px;
+    }
+
+    ::-webkit-scrollbar-thumb:active {
+        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
+        border-radius: 24px;
+    }
 }

src/app/core/scss/partials/plugins/_perfect-scrollbar.scss

@@ -1,4 +1,5 @@
 .ps {
+    position: relative;
 
     > .ps__scrollbar-y-rail {
         z-index: 99999;

src/app/main/content/apps/calendar/calendar.component.html

@@ -1,4 +1,4 @@
-<div id="calendar" class="page-layout simple fullwidth" perfectScrollbar>
+<div id="calendar" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header" [ngClass]="viewDate | date:'MMM'">
@@ -86,7 +86,7 @@
     <!-- / HEADER -->
 
     <!-- CONTENT -->
-    <div class="content" perfectScrollbar>
+    <div class="content" fusePerfectScrollbar>
         <div [ngSwitch]="view">
             <mwl-calendar-month-view
                 *ngSwitchCase="'month'"

src/app/main/content/apps/calendar/event-form/event-form.component.html

@@ -9,7 +9,7 @@
     </div>
 </md-toolbar>
 
-<div md-dialog-content class="p-24 m-0" perfectScrollbar>
+<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
 
     <form name="eventForm" [formGroup]="eventForm" class="event-form" fxLayout="column" fxFlex>
 

src/app/main/content/apps/chat/chat-view/chat-view.component.html

@@ -57,7 +57,7 @@
     <!-- / CHAT TOOLBAR -->
 
     <!-- CHAT CONTENT -->
-    <div id="chat-content" fxFlex perfectScrollbar>
+    <div id="chat-content" fxFlex fusePerfectScrollbar>
 
         <!-- CHAT MESSAGES -->
         <div class="chat-messages">

src/app/main/content/apps/chat/chat-view/chat-view.component.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
 import { ChatService } from '../chat.service';
 import { NgForm } from '@angular/forms';
-import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { FusePerfectScrollbarDirective } from '../../../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 
 @Component({
     selector   : 'fuse-chat-view',
@@ -16,7 +16,7 @@ export class FuseChatViewComponent implements OnInit, AfterViewInit
     contact: any;
     replyInput: any;
     selectedChat: any;
-    @ViewChild(PerfectScrollbarDirective) directiveScroll: PerfectScrollbarDirective;
+    @ViewChild(FusePerfectScrollbarDirective) directiveScroll: FusePerfectScrollbarDirective;
     @ViewChildren('replyInput') replyInputField;
     @ViewChild('replyForm') replyForm: NgForm;
 

src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html

@@ -98,7 +98,7 @@
 <!-- / SIDENAV HEADER -->
 
 <!-- SIDENAV CONTENT -->
-<div class="sidenav-content" perfectScrollbar fxFlex>
+<div class="sidenav-content" fusePerfectScrollbar fxFlex>
 
     <!-- CHATS CONTENT -->
     <div>

src/app/main/content/apps/chat/sidenavs/left/user/user.component.html

@@ -29,7 +29,7 @@
 </div>
 
 <!-- SIDENAV CONTENT -->
-<div class="sidenav-content p-16" perfectScrollbar fxFlex>
+<div class="sidenav-content p-16" fusePerfectScrollbar fxFlex>
 
     <!-- USER MOOD -->
     <md-card>

src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html

@@ -31,7 +31,7 @@
 </div>
 
 <!-- SIDENAV CONTENT -->
-<div class="sidenav-content p-16" perfectScrollbar fxFlex *ngIf="contact">
+<div class="sidenav-content p-16" fusePerfectScrollbar fxFlex *ngIf="contact">
 
     <!-- CONTACT MOOD -->
     <md-card>

src/app/main/content/apps/contacts/contact-form/contact-form.component.html

@@ -15,7 +15,7 @@
     </md-toolbar-row>
 </md-toolbar>
 
-<div md-dialog-content class="p-24 m-0" perfectScrollbar>
+<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
 
     <form [formGroup]="contactForm">
 

src/app/main/content/apps/contacts/contacts.component.html

@@ -1,4 +1,4 @@
-<div id="contacts" class="page-layout simple left-sidenav inner-sidenav" perfectScrollbar>
+<div id="contacts" class="page-layout simple left-sidenav inner-sidenav" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="start start"
@@ -51,7 +51,7 @@
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
-        <div class="center p-24 pr-sm-92" perfectScrollbar>
+        <div class="center p-24 pr-sm-92" fusePerfectScrollbar>
 
             <!-- CONTENT -->
             <div class="content md-white-bg mat-elevation-z4">

src/app/main/content/apps/contacts/sidenavs/main/main.component.html

@@ -13,7 +13,7 @@
         <!-- / SIDENAV HEADER -->
 
         <!-- SIDENAV CONTENT -->
-        <div class="content py-16" perfectScrollbar>
+        <div class="content py-16" fusePerfectScrollbar>
 
             <div class="nav">
 

src/app/main/content/apps/dashboards/project/project.component.html

@@ -1,9 +1,9 @@
-<div id="dashboard-project" class="page-layout simple right-sidenav" fxLayout="row" perfectScrollbar>
+<div id="dashboard-project" class="page-layout simple right-sidenav" fxLayout="row">
 
     <md-sidenav-container>
 
         <!-- CENTER -->
-        <div class="center" fxFlex perfectScrollbar>
+        <div class="center" fxFlex fusePerfectScrollbar>
 
             <!-- HEADER -->
             <div class="header md-accent-bg p-24 pb-0" fxLayout="column" fxLayoutAlign="space-between">
@@ -690,7 +690,7 @@
         <!-- SIDENAV -->
         <md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
 
-            <div class="sidenav-content" perfectScrollbar>
+            <div class="sidenav-content" fusePerfectScrollbar>
                 <!-- WIDGET GROUP -->
                 <div class="widget-group" fxLayout="column" fxFlex="100">
 

src/app/main/content/apps/file-manager/file-manager.component.html

@@ -1,4 +1,4 @@
-<div id="file-manager" class="page-layout simple right-sidenav" perfectScrollbar>
+<div id="file-manager" class="page-layout simple right-sidenav" fusePerfectScrollbar>
 
     <md-sidenav-container>
 
@@ -58,7 +58,7 @@
             <!-- / HEADER -->
 
             <!-- CONTENT -->
-            <div class="content md-white-bg" perfectScrollbar>
+            <div class="content md-white-bg" fusePerfectScrollbar>
                 <fuse-file-list></fuse-file-list>
             </div>
             <!-- / CONTENT -->

src/app/main/content/apps/file-manager/sidenavs/details/details.component.html

@@ -27,7 +27,7 @@
 <!-- / SIDENAV HEADER -->
 
 <!-- SIDENAV CONTENT -->
-<div class="content p-24 md-white-bg" perfectScrollbar>
+<div class="content p-24 md-white-bg" fusePerfectScrollbar>
 
     <div class="file-details">
 

src/app/main/content/apps/file-manager/sidenavs/main/main.component.html

@@ -10,7 +10,7 @@
 <!-- / SIDENAV HEADER -->
 
 <!-- SIDENAV CONTENT -->
-<div class="content py-16" perfectScrollbar>
+<div class="content py-16" fusePerfectScrollbar>
 
     <div class="nav">
 

src/app/main/content/apps/mail/dialogs/compose/compose.component.html

@@ -9,7 +9,7 @@
     </div>
 </md-toolbar>
 
-<div md-dialog-content class="p-24 m-0" perfectScrollbar>
+<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
 
     <form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>
 

src/app/main/content/apps/mail/mail.component.html

@@ -1,4 +1,4 @@
-<div id="mail" class="page-layout carded left-sidenav" perfectScrollbar>
+<div id="mail" class="page-layout carded left-sidenav" fusePerfectScrollbar>
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg md-accent-bg"></div>
@@ -96,9 +96,9 @@
                 <!-- CONTENT -->
                 <div class="content" fxLayoutAlign="row">
 
-                    <fuse-mail-list perfectScrollbar fxFlex></fuse-mail-list>
+                    <fuse-mail-list fusePerfectScrollbar fxFlex></fuse-mail-list>
 
-                    <fuse-mail-details perfectScrollbar fxFlex></fuse-mail-details>
+                    <fuse-mail-details fusePerfectScrollbar fxFlex></fuse-mail-details>
 
                 </div>
                 <!-- / CONTENT -->

src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html

@@ -21,7 +21,7 @@
 <!-- / SIDENAV HEADER -->
 
 <!-- SIDENAV CONTENT -->
-<div class="content" perfectScrollbar>
+<div class="content" fusePerfectScrollbar>
 
     <div class="p-24">
         <button md-raised-button fxFlex

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html

@@ -123,7 +123,7 @@
     </div>
 </md-toolbar>
 
-<div *ngIf="card" md-dialog-content class="p-24 m-0" perfectScrollbar>
+<div *ngIf="card" md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
 
     <div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"
          fxLayout.xs="column" fxLayoutAlign="center center">

src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html

@@ -10,7 +10,7 @@
             </button>
         </div>
 
-        <div fxFlex fxLayout="column" perfectScrollbar>
+        <div fxFlex fxLayout="column" fusePerfectScrollbar>
 
             <div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
                  [class]="label.color">

src/app/main/content/apps/scrumboard/board/list/list.component.html

@@ -26,7 +26,7 @@
 
         <div class="list-cards ngx-dnd-container"
              [model]="list.idCards" ngxDroppable="card" (out)="onDrop($event)"
-             perfectScrollbar #listScroll>
+             fusePerfectScrollbar #listScroll>
             <fuse-scrumboard-board-card ngxDraggable
                                         (click)="openCardDialog(cardId)"
                                         class="scrumboard-board-card mat-elevation-z2 ngx-dnd-item"

src/app/main/content/apps/scrumboard/board/list/list.component.ts

@@ -3,11 +3,11 @@ import { FuseUtils } from '../../../../../../core/fuseUtils';
 import { ScrumboardService } from 'app/main/content/apps/scrumboard/scrumboard.service';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
-import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 import { MdDialog, MdDialogRef } from '@angular/material';
 import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component';
 import { FuseConfirmDialogComponent } from '../../../../../../core/components/confirm-dialog/confirm-dialog.component';
 import { Card } from '../../card.model';
+import { FusePerfectScrollbarDirective } from '../../../../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 
 @Component({
     selector     : 'fuse-scrumboard-board-list',
@@ -21,7 +21,7 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
     dialogRef: any;
 
     @Input() list;
-    @ViewChild(PerfectScrollbarDirective) listScroll: PerfectScrollbarDirective;
+    @ViewChild(FusePerfectScrollbarDirective) listScroll: FusePerfectScrollbarDirective;
 
     onBoardChanged: Subscription;
 

src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html

@@ -9,7 +9,7 @@
         <!-- / SIDENAV HEADER -->
 
         <!-- SIDENAV CONTENT -->
-        <div class="content py-16" perfectScrollbar>
+        <div class="content py-16" fusePerfectScrollbar>
 
             <div class="nav">
                 <div class="nav-item">
@@ -67,7 +67,7 @@
         <!-- / SIDENAV HEADER -->
 
         <!-- SIDENAV CONTENT -->
-        <div class="content p-8" perfectScrollbar>
+        <div class="content p-8" fusePerfectScrollbar>
             <fuse-scrumboard-board-color-selector></fuse-scrumboard-board-color-selector>
         </div>
         <!-- / SIDENAV CONTENT -->

src/app/main/content/apps/scrumboard/scrumboard.component.html

@@ -1,5 +1,5 @@
 <!-- BOARDS -->
-<div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex perfectScrollbar>
+<div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex fusePerfectScrollbar>
 
     <div class="header pt-44 pt-md-88" fxFlex="0 0 auto">
         <h1>Scrumboard App</h1>

src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html

@@ -21,7 +21,7 @@
 <!-- / SIDENAV HEADER -->
 
 <!-- SIDENAV CONTENT -->
-<div class="content" perfectScrollbar>
+<div class="content" fusePerfectScrollbar>
 
     <div class="p-24">
         <button md-raised-button fxFlex

src/app/main/content/apps/todo/todo.component.html

@@ -1,4 +1,4 @@
-<div id="todo" class="page-layout carded left-sidenav" perfectScrollbar>
+<div id="todo" class="page-layout carded left-sidenav" fusePerfectScrollbar>
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg md-accent-bg"></div>
@@ -82,9 +82,9 @@
                 <!-- CONTENT -->
                 <div class="content" fxFlexAlign="row">
 
-                    <fuse-todo-list perfectScrollbar fxFlex></fuse-todo-list>
+                    <fuse-todo-list fusePerfectScrollbar fxFlex></fuse-todo-list>
 
-                    <fuse-todo-details perfectScrollbar fxFlex></fuse-todo-details>
+                    <fuse-todo-details fusePerfectScrollbar fxFlex></fuse-todo-details>
 
                 </div>
                 <!-- / CONTENT -->

src/app/main/content/components-third-party/datatable/ngx-datatable.component.html

@@ -1,4 +1,4 @@
-<div id="ngx-datatable" class="page-layout simple fullwidth" perfectScrollbar>
+<div id="ngx-datatable" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between">

src/app/main/content/components/countdown/countdown.component.html

@@ -1,4 +1,4 @@
-<div id="countdown" class="page-layout simple fullwidth" perfectScrollbar>
+<div id="countdown" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/components/hljs/hljs.component.html

@@ -1,4 +1,4 @@
-<div id="hljs" class="page-layout simple fullwidth" perfectScrollbar>
+<div id="hljs" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/components/material-color-picker/material-color-picker.component.html

@@ -1,4 +1,4 @@
-<div id="material-color-picker" class="page-layout simple fullwidth" perfectScrollbar>
+<div id="material-color-picker" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/components/navigation/navigation.component.html

@@ -1,4 +1,4 @@
-<div id="navigation" class="page-layout simple fullwidth" perfectScrollbar>
+<div id="navigation" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/components/price-tables/price-tables.component.html

@@ -1,4 +1,4 @@
-<div id="price-tables" class="page-layout simple fullwidth" perfectScrollbar>
+<div id="price-tables" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/components/search-bar/search-bar.component.html

@@ -1,4 +1,4 @@
-<div id="search-bar" class="page-layout simple fullwidth" perfectScrollbar>
+<div id="search-bar" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/components/shortcuts/shortcuts.component.html

@@ -1,4 +1,4 @@
-<div id="shortcuts" class="page-layout simple fullwidth" perfectScrollbar>
+<div id="shortcuts" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/components/widget/widget.component.html

@@ -1,4 +1,4 @@
-<div id="widget" class="page-layout simple fullwidth" perfectScrollbar>
+<div id="widget" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html

@@ -1,4 +1,4 @@
-<div id="forgot-password" fxLayout="column" perfectScrollbar>
+<div id="forgot-password" fxLayout="column" fusePerfectScrollbar>
 
     <div id="forgot-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 

src/app/main/content/pages/authentication/lock/lock.component.html

@@ -1,4 +1,4 @@
-<div id="lock" fxLayout="column" perfectScrollbar>
+<div id="lock" fxLayout="column" fusePerfectScrollbar>
 
     <div id="lock-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 

src/app/main/content/pages/authentication/login-2/login-2.component.html

@@ -15,7 +15,7 @@
         </div>
     </div>
 
-    <div id="login-form-wrapper" perfectScrollbar>
+    <div id="login-form-wrapper" fusePerfectScrollbar>
 
         <div id="login-form">
 

src/app/main/content/pages/authentication/login/login.component.html

@@ -1,4 +1,4 @@
-<div id="login" fxLayout="column" perfectScrollbar>
+<div id="login" fxLayout="column" fusePerfectScrollbar>
 
     <div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 

src/app/main/content/pages/authentication/register-2/register-2.component.html

@@ -15,7 +15,7 @@
         </div>
     </div>
 
-    <div id="register-form-wrapper" perfectScrollbar>
+    <div id="register-form-wrapper" fusePerfectScrollbar>
 
         <div id="register-form">
 

src/app/main/content/pages/authentication/register/register.component.html

@@ -1,4 +1,4 @@
-<div id="register" fxLayout="column" perfectScrollbar>
+<div id="register" fxLayout="column" fusePerfectScrollbar>
 
     <div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 

src/app/main/content/pages/authentication/reset-password/reset-password.component.html

@@ -1,4 +1,4 @@
-<div id="reset-password" fxLayout="column" perfectScrollbar>
+<div id="reset-password" fxLayout="column" fusePerfectScrollbar>
 
     <div id="reset-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 

src/app/main/content/pages/coming-soon/coming-soon.component.html

@@ -1,4 +1,4 @@
-<div id="coming-soon" fxLayout="column" perfectScrollbar>
+<div id="coming-soon" fxLayout="column" fusePerfectScrollbar>
 
     <div id="coming-soon-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 

src/app/main/content/pages/invoices/compact/compact.component.html

@@ -1,4 +1,4 @@
-<div id="invoice" class="compact page-layout blank" fxLayout="row" perfectScrollbar>
+<div id="invoice" class="compact page-layout blank" fxLayout="row" fusePerfectScrollbar>
 
     <div class="invoice-container">
 

src/app/main/content/pages/invoices/modern/modern.component.html

@@ -1,4 +1,4 @@
-<div id="invoice" class="modern page-layout blank" fxLayout="row" perfectScrollbar>
+<div id="invoice" class="modern page-layout blank" fxLayout="row" fusePerfectScrollbar>
 
     <div class="invoice-container">
 

src/app/main/content/pages/maintenance/maintenance.component.html

@@ -1,4 +1,4 @@
-<div id="maintenance" fxLayout="column" perfectScrollbar>
+<div id="maintenance" fxLayout="column" fusePerfectScrollbar>
 
     <div id="maintenance-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 

src/app/main/content/pages/profile/profile.component.html

@@ -1,4 +1,4 @@
-<div id="profile" class="page-layout simple tabbed" perfectScrollbar>
+<div id="profile" class="page-layout simple tabbed" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header p-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"

src/app/main/content/pages/search/search.component.html

@@ -1,4 +1,4 @@
-<div id="search" class="page-layout simple tabbed" perfectScrollbar>
+<div id="search" class="page-layout simple tabbed" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"

src/app/main/content/services/config/config.component.html

@@ -1,4 +1,4 @@
-<div id="config" class="page-layout simple fullwidth" perfectScrollbar>
+<div id="config" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/services/splash-screen/splash-screen.component.html

@@ -1,4 +1,4 @@
-<div id="splash-screen" class="page-layout simple fullwidth" perfectScrollbar>
+<div id="splash-screen" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/ui/colors/colors.component.html

@@ -1,4 +1,4 @@
-<div id="material-colors" class="page-layout simple tabbed" fxLayout="column" perfectScrollbar>
+<div id="material-colors" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">

src/app/main/content/ui/forms/forms.component.html

@@ -1,4 +1,4 @@
-<div id="forms" class="page-layout simple fullwidth" fxLayout="column" perfectScrollbar>
+<div id="forms" class="page-layout simple fullwidth" fxLayout="column" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/ui/helper-classes/helper-classes.component.html

@@ -1,4 +1,4 @@
-<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" perfectScrollbar>
+<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/ui/icons/icons.component.html

@@ -1,4 +1,4 @@
-<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" perfectScrollbar>
+<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">

src/app/main/content/ui/page-layouts/blank/blank.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout blank p-24" perfectScrollbar>
+<div class="page-layout blank p-24" fusePerfectScrollbar>
 
     <h2>Blank Page</h2>
 

src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout carded fullwidth single-scroll" perfectScrollbar>
+<div class="page-layout carded fullwidth single-scroll" fusePerfectScrollbar>
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg md-accent-bg"></div>

src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout carded fullwidth" perfectScrollbar>
+<div class="page-layout carded fullwidth" fusePerfectScrollbar>
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg md-accent-bg"></div>
@@ -23,7 +23,7 @@
             <!-- / CONTENT TOOLBAR -->
 
             <!-- CONTENT -->
-            <div class="content p-24" perfectScrollbar>
+            <div class="content p-24" fusePerfectScrollbar>
 
                 <fuse-demo-content></fuse-demo-content>
 

src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout carded left-sidenav single-scroll" perfectScrollbar>
+<div class="page-layout carded left-sidenav single-scroll" fusePerfectScrollbar>
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg md-accent-bg"></div>
@@ -17,7 +17,7 @@
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content p-24" perfectScrollbar>
+            <div class="content p-24" fusePerfectScrollbar>
                 <fuse-demo-sidenav></fuse-demo-sidenav>
             </div>
             <!-- / SIDENAV CONTENT -->
@@ -50,7 +50,7 @@
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content p-24" perfectScrollbar>
+                <div class="content p-24" fusePerfectScrollbar>
 
                     <fuse-demo-content></fuse-demo-content>
 

src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout carded left-sidenav" perfectScrollbar>
+<div class="page-layout carded left-sidenav" fusePerfectScrollbar>
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg md-accent-bg"></div>
@@ -17,7 +17,7 @@
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content p-24" perfectScrollbar>
+            <div class="content p-24" fusePerfectScrollbar>
 
                 <fuse-demo-sidenav></fuse-demo-sidenav>
 
@@ -52,7 +52,7 @@
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content p-24" perfectScrollbar>
+                <div class="content p-24" fusePerfectScrollbar>
 
                     <fuse-demo-content></fuse-demo-content>
 

src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout carded right-sidenav single-scroll" perfectScrollbar>
+<div class="page-layout carded right-sidenav single-scroll" fusePerfectScrollbar>
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg md-accent-bg"></div>
@@ -31,7 +31,7 @@
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content p-24" perfectScrollbar>
+                <div class="content p-24" fusePerfectScrollbar>
 
                     <fuse-demo-content></fuse-demo-content>
 
@@ -55,7 +55,7 @@
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content p-24" perfectScrollbar>
+            <div class="content p-24" fusePerfectScrollbar>
                 <fuse-demo-sidenav></fuse-demo-sidenav>
             </div>
             <!-- / SIDENAV CONTENT -->

src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout carded right-sidenav" perfectScrollbar>
+<div class="page-layout carded right-sidenav" fusePerfectScrollbar>
 
     <!-- TOP BACKGROUND -->
     <div class="top-bg md-accent-bg"></div>
@@ -31,7 +31,7 @@
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content p-24" perfectScrollbar>
+                <div class="content p-24" fusePerfectScrollbar>
 
                     <fuse-demo-content></fuse-demo-content>
 
@@ -55,7 +55,7 @@
             <!-- / SIDENAV HEADER -->
 
             <!-- SIDENAV CONTENT -->
-            <div class="content p-24" perfectScrollbar>
+            <div class="content p-24" fusePerfectScrollbar>
                 <fuse-demo-sidenav></fuse-demo-sidenav>
             </div>
             <!-- / SIDENAV CONTENT -->

src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout simple fullwidth" perfectScrollbar>
+<div class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout simple left-sidenav single-scroll" perfectScrollbar>
+<div class="page-layout simple left-sidenav single-scroll" fusePerfectScrollbar>
 
     <md-sidenav-container>
 
@@ -12,7 +12,7 @@
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
-        <div class="center" perfectScrollbar>
+        <div class="center" fusePerfectScrollbar>
 
             <!-- HEADER -->
             <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout simple left-sidenav inner-sidenav" perfectScrollbar>
+<div class="page-layout simple left-sidenav inner-sidenav" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
@@ -22,7 +22,7 @@
         <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-left-sidenav-3" md-is-locked-open="gt-md">
 
-            <div class="sidenav-content" perfectScrollbar>
+            <div class="sidenav-content" fusePerfectScrollbar>
 
                 <fuse-demo-sidenav></fuse-demo-sidenav>
 
@@ -32,7 +32,7 @@
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
-        <div class="center p-24" perfectScrollbar>
+        <div class="center p-24" fusePerfectScrollbar>
 
             <!-- CONTENT -->
             <div class="content p-24 mat-elevation-z4 md-white-bg">

src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout simple left-sidenav" perfectScrollbar>
+<div class="page-layout simple left-sidenav" fusePerfectScrollbar>
 
     <md-sidenav-container>
 
@@ -6,7 +6,7 @@
         <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
 
-            <div class="sidenav-content p-24" perfectScrollbar>
+            <div class="sidenav-content p-24" fusePerfectScrollbar>
 
                 <fuse-demo-sidenav></fuse-demo-sidenav>
 
@@ -16,7 +16,7 @@
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
-        <div class="center" perfectScrollbar>
+        <div class="center" fusePerfectScrollbar>
 
             <!-- HEADER -->
             <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html

@@ -1,9 +1,9 @@
-<div class="page-layout simple right-sidenav single-scroll" perfectScrollbar>
+<div class="page-layout simple right-sidenav single-scroll" fusePerfectScrollbar>
 
     <md-sidenav-container>
 
         <!-- CENTER -->
-        <div class="center" perfectScrollbar>
+        <div class="center" fusePerfectScrollbar>
 
             <!-- HEADER -->
             <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout simple right-sidenav inner-sidenav" perfectScrollbar>
+<div class="page-layout simple right-sidenav inner-sidenav" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
@@ -19,7 +19,7 @@
     <md-sidenav-container>
 
         <!-- CENTER -->
-        <div class="center p-24" perfectScrollbar>
+        <div class="center p-24" fusePerfectScrollbar>
 
             <!-- CONTENT -->
             <div class="content p-24 mat-elevation-z4 md-white-bg">
@@ -36,7 +36,7 @@
         <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-right-sidenav-3" md-is-locked-open="gt-md">
 
-            <div class="sidenav-content" perfectScrollbar>
+            <div class="sidenav-content" fusePerfectScrollbar>
 
                 <fuse-demo-sidenav></fuse-demo-sidenav>
 

src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html

@@ -1,9 +1,9 @@
-<div class="page-layout simple right-sidenav" perfectScrollbar>
+<div class="page-layout simple right-sidenav" fusePerfectScrollbar>
 
     <md-sidenav-container>
 
         <!-- CENTER -->
-        <div class="center" perfectScrollbar>
+        <div class="center" fusePerfectScrollbar>
 
             <!-- HEADER -->
             <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
@@ -36,7 +36,7 @@
         <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-right-sidenav" md-is-locked-open="gt-md">
 
-            <div class="sidenav-content p-24" perfectScrollbar>
+            <div class="sidenav-content p-24" fusePerfectScrollbar>
 
                 <fuse-demo-sidenav></fuse-demo-sidenav>
 

src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html

@@ -1,4 +1,4 @@
-<div class="page-layout simple tabbed" perfectScrollbar>
+<div class="page-layout simple tabbed" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24">

src/app/main/content/ui/typography/typography.component.html

@@ -1,4 +1,4 @@
-<div id="typography" class="page-layout simple tabbed" fxLayout="column" perfectScrollbar>
+<div id="typography" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/main.component.scss

@@ -12,19 +12,6 @@ fuse-main {
         @include mat-elevation(8);
     }
 
-    &.disable-perfect-scrollbar {
-
-        .ps {
-            -webkit-overflow-scrolling: touch !important;
-            overflow: auto !important;
-        }
-
-        .ps__scrollbar-x-rail,
-        .ps__scrollbar-y-rail {
-            display: none !important;
-        }
-    }
-
     > .mat-sidenav-container {
         display: flex;
         flex: 1;

src/app/main/main.component.ts

@@ -1,6 +1,8 @@
-import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, HostBinding, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { FuseConfigService } from '../core/services/config.service';
+import { Platform } from '@angular/cdk/platform';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
     selector     : 'fuse-main',
@@ -12,13 +14,14 @@ export class FuseMainComponent implements OnInit, OnDestroy
 {
     onSettingsChanged: Subscription;
     fuseSettings: any;
-    @HostBinding('class.disable-perfect-scrollbar') disableCustomScrollbars;
     @HostBinding('class.boxed') boxed;
 
     constructor(
         private _renderer: Renderer2,
         private _elementRef: ElementRef,
-        private fuseConfig: FuseConfigService
+        private fuseConfig: FuseConfigService,
+        private platform: Platform,
+        @Inject(DOCUMENT) private document: any
     )
     {
         this.onSettingsChanged =
@@ -26,10 +29,14 @@ export class FuseMainComponent implements OnInit, OnDestroy
                 .subscribe(
                     (newSettings) => {
                         this.fuseSettings = newSettings;
-                        this.disableCustomScrollbars = !this.fuseSettings.customScrollbars;
                         this.boxed = this.fuseSettings.layout.mode === 'boxed';
                     }
                 );
+
+        if ( this.platform.ANDROID || this.platform.IOS )
+        {
+            this.document.body.className += ' is-mobile';
+        }
     }
 
     ngOnInit()

src/app/main/navbar/vertical/navbar-vertical.component.html

@@ -15,6 +15,6 @@
 
 </div>
 
-<div class="navbar-content" perfectScrollbar>
+<div class="navbar-content" fusePerfectScrollbar>
     <fuse-navigation layout="vertical"></fuse-navigation>
 </div>

src/app/main/navbar/vertical/navbar-vertical.component.ts

@@ -5,8 +5,8 @@ import { FuseNavbarVerticalService } from './navbar-vertical.service';
 import { ObservableMedia } from '@angular/flex-layout';
 import { FuseMainComponent } from '../../main.component';
 import { NavigationEnd, Router } from '@angular/router';
-import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 import { FuseNavigationService } from '../../../core/components/navigation/navigation.service';
+import { FusePerfectScrollbarDirective } from '../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 
 @Component({
     selector     : 'fuse-navbar-vertical',
@@ -21,7 +21,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
     @HostBinding('class.folded-open') isFoldedOpen: boolean;
     @HostBinding('class.initialized') initialized: boolean;
     @Input('folded') foldedByDefault = false;
-    @ViewChild(PerfectScrollbarDirective) perfectScrollbarDirective;
+    @ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
 
     matchMediaWatcher: Subscription;
 
@@ -39,7 +39,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
         this.fuseNavigationService.onNavCollapseToggled.subscribe(() => {
 
             setTimeout(() => {
-                this.perfectScrollbarDirective.update();
+                this.fusePerfectScrollbarDirective.update();
             }, 310);
         });