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

package-lock.json

@@ -12,7 +12,7 @@
       "requires": {
         "loader-utils": "1.1.0",
         "source-map": "0.5.6",
-        "typescript": "2.3.4",
+        "typescript": "2.3.3",
         "webpack-sources": "1.0.1"
       }
     },
@@ -113,7 +113,7 @@
         "style-loader": "0.13.2",
         "stylus": "0.54.5",
         "stylus-loader": "3.0.1",
-        "typescript": "2.3.4",
+        "typescript": "2.3.3",
         "url-loader": "0.5.9",
         "webpack": "3.5.6",
         "webpack-concat-plugin": "1.4.0",
@@ -286,9 +286,9 @@
       "dev": true
     },
     "@types/jasminewd2": {
-      "version": "2.0.3",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.2.tgz",
-      "integrity": "sha512-hYDVmQZT5VA2kigd4H4bv7vl/OhlympwREUemqBdOqtrYTo5Ytm12a5W5/nGgGYdanGVxj0x/VhZ7J3hOg/YKg==",
+      "integrity": "sha1-X2jh5pe/ELxv2Mvy4Aaj1nEsW2Q=",
       "dev": true,
       "requires": {
         "@types/jasmine": "2.6.0"
@@ -5181,22 +5181,45 @@
       "dev": true
     },
     "istanbul-api": {
-      "version": "1.1.11",
+      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/istanbul-api/-/istanbul-api-1.1.11.tgz",
+      "resolved": "https://registry.npmjs.org/istanbul-api/-/istanbul-api-1.1.14.tgz",
-      "integrity": "sha1-/MC0YeKzvaceMFFVE4I4doJX2d4=",
+      "integrity": "sha1-JbxXAffGgMD//5E95G42GaOm5oA=",
       "dev": true,
       "requires": {
         "async": "2.5.0",
         "fileset": "2.0.3",
         "istanbul-lib-coverage": "1.1.1",
         "istanbul-lib-hook": "1.0.7",
-        "istanbul-lib-instrument": "1.7.4",
+        "istanbul-lib-instrument": "1.8.0",
         "istanbul-lib-report": "1.1.1",
         "istanbul-lib-source-maps": "1.2.1",
-        "istanbul-reports": "1.1.1",
+        "istanbul-reports": "1.1.2",
         "js-yaml": "3.7.0",
         "mkdirp": "0.5.1",
         "once": "1.4.0"
+      },
+      "dependencies": {
+        "babylon": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+          "dev": true
+        },
+        "istanbul-lib-instrument": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-1.8.0.tgz",
+          "integrity": "sha1-ZvbJQhzJ7EcE928tsIS6kHiitTI=",
+          "dev": true,
+          "requires": {
+            "babel-generator": "6.25.0",
+            "babel-template": "6.25.0",
+            "babel-traverse": "6.25.0",
+            "babel-types": "6.25.0",
+            "babylon": "6.18.0",
+            "istanbul-lib-coverage": "1.1.1",
+            "semver": "5.4.1"
+          }
+        }
       }
     },
     "istanbul-instrumenter-loader": {
@@ -5281,9 +5304,9 @@
       }
     },
     "istanbul-reports": {
-      "version": "1.1.1",
+      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-1.1.2.tgz",
-      "integrity": "sha512-P8G873A0kW24XRlxHVGhMJBhQ8gWAec+dae7ZxOBzxT4w+a9ATSPvRVK3LB1RAJ9S8bg2tOyWHAGW40Zd2dKfw==",
+      "integrity": "sha1-D7Lj9qqZIr085F0F2KtNXo4HvU8=",
       "dev": true,
       "requires": {
         "handlebars": "4.0.10"
@@ -5361,15 +5384,15 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "source-map": "0.5.6",
+            "source-map": "0.5.7",
             "uglify-to-browserify": "1.0.2",
             "yargs": "3.10.0"
           },
           "dependencies": {
             "source-map": {
-              "version": "0.5.6",
+              "version": "0.5.7",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-              "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
+              "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
               "dev": true,
               "optional": true
             }
@@ -5398,19 +5421,19 @@
       "requires": {
         "exit": "0.1.2",
         "glob": "7.1.2",
-        "jasmine-core": "2.6.4"
+        "jasmine-core": "2.6.2"
       }
     },
     "jasmine-core": {
-      "version": "2.6.4",
+      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.6.4.tgz",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.6.2.tgz",
-      "integrity": "sha1-3skmzQqfoof7bbXHVfpIfnTOysU=",
+      "integrity": "sha1-dOoffPQoaRryARB9YxI0AnoJ2qs=",
       "dev": true
     },
     "jasmine-spec-reporter": {
-      "version": "4.1.1",
+      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/jasmine-spec-reporter/-/jasmine-spec-reporter-4.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/jasmine-spec-reporter/-/jasmine-spec-reporter-4.1.0.tgz",
-      "integrity": "sha1-Wm1Yq11hvqcwn7wnkjlRF1axtYg=",
+      "integrity": "sha1-uKp1hN9Y5Nq2Gs2++3bQlqo4Zj8=",
       "dev": true,
       "requires": {
         "colors": "1.1.2"
@@ -5610,13 +5633,12 @@
       }
     },
     "karma-coverage-istanbul-reporter": {
-      "version": "1.3.0",
+      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-1.2.1.tgz",
-      "integrity": "sha1-0ULNnFVzHJ42Pvc3To7xoxvr+ts=",
+      "integrity": "sha1-XjynuaFT2xy63/70xG2XjTilMVQ=",
       "dev": true,
       "requires": {
-        "istanbul-api": "1.1.11",
+        "istanbul-api": "1.1.14"
-        "minimatch": "3.0.4"
       }
     },
     "karma-jasmine": {
@@ -6805,6 +6827,11 @@
         "sha.js": "2.4.8"
       }
     },
+    "perfect-scrollbar": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-0.8.1.tgz",
+      "integrity": "sha512-RNC5tX/JMRYR+qVdJTEAWnRxw0Yf9lvbO8lTuAOvgDODkiA8lveTSkvrNMhmaGKEyimJpJl+myb/syVS9YyPuw=="
+    },
     "performance-now": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
@@ -8974,9 +9001,9 @@
       "dev": true
     },
     "ts-node": {
-      "version": "3.0.6",
+      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-3.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-3.0.4.tgz",
-      "integrity": "sha1-VRJ/95DH7r9rpowebd6UsJqqIeA=",
+      "integrity": "sha1-oUdevyT9Ti7i+6ixqhYFuXe95QY=",
       "dev": true,
       "requires": {
         "arrify": "1.0.1",
@@ -8988,7 +9015,7 @@
         "source-map-support": "0.4.15",
         "tsconfig": "6.0.0",
         "v8flags": "2.1.1",
-        "yn": "2.0.0"
+        "yn": "1.3.0"
       },
       "dependencies": {
         "chalk": {
@@ -9132,9 +9159,9 @@
       }
     },
     "typescript": {
-      "version": "2.3.4",
+      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.3.3.tgz",
-      "integrity": "sha1-PTgyGCgjHkNPKHUUlZw3qCtin0I=",
+      "integrity": "sha1-ljnzw7QBSOjKl/4IpR3RiRu2viI=",
       "dev": true
     },
     "uglify-js": {
@@ -10168,10 +10195,13 @@
       "dev": true
     },
     "yn": {
-      "version": "2.0.0",
+      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-1.3.0.tgz",
-      "integrity": "sha1-5a2ryKz0CPY4X8dklWhMiOavaJo=",
+      "integrity": "sha1-GwgSq7jYBdSJZvjfOF3J2syaGdg=",
-      "dev": true
+      "dev": true,
+      "requires": {
+        "object-assign": "4.1.1"
+      }
     },
     "zone.js": {
       "version": "0.8.17",

package.json

@@ -40,6 +40,7 @@
     "ngx-color-picker": "4.3.1",
     "ngx-cookie-service": "1.0.7",
     "ngx-perfect-scrollbar": "4.6.2",
+    "perfect-scrollbar": "0.8.1",
     "rxjs": "5.4.3",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.17"

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
+// Perfect scrollbar
-@import "~ngx-perfect-scrollbar/dist/lib/perfect-scrollbar.component.css";
+@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,3 +1,5 @@
+body:not(.is-mobile) {
+
     ::-webkit-scrollbar {
         width: 12px;
         height: 12px;
@@ -18,3 +20,4 @@
         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);
         });