perfect scrollbar

package-lock.json

@@ -11130,6 +11130,15 @@
         "tslib": "^1.9.0"
       }
     },
+    "ngx-perfect-scrollbar": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-9.0.0.tgz",
+      "integrity": "sha512-jiFrOLONf/w2PjSKkEjQeTnMdlMVcQgjzIrYcsor1HWTmE+95J2sZAd/WF4zoutbpIqfU8VQQoAp8HOa7U1c/g==",
+      "requires": {
+        "perfect-scrollbar": "1.5.0",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -12158,6 +12167,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "perfect-scrollbar": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
+      "integrity": "sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA=="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -13621,6 +13635,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.16.1.tgz",

package.json

@@ -30,6 +30,7 @@
     "docx": "^5.0.2",
     "firebase": ">= 5.5.7 <8",
     "ngx-mat-select-search": "^2.1.2",
+    "ngx-perfect-scrollbar": "^9.0.0",
     "rxjs": "~6.5.5",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

src/app/app.component.html

@@ -1,4 +1,6 @@
 <app-navigation></app-navigation>
-<div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
-  <router-outlet #o="outlet"></router-outlet>
-</div>
+<perfect-scrollbar [perfectScrollbar] class="scroll" style="max-height: calc(100vh); width: 100%; overflow: hidden;">
+  <div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
+    <router-outlet #o="outlet"></router-outlet>
+  </div>
+</perfect-scrollbar>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {fader} from './animations';
 
 @Component({
@@ -7,6 +7,13 @@ import {fader} from './animations';
   styleUrls: ['./app.component.less'],
   animations: [fader]
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+  public static hideLoader = () => document.querySelector('#load-bg').classList.add('hidden');
+
+  public ngOnInit(): void {
+    setTimeout(() => AppComponent.hideLoader(), 800);
+
+  }
+
   title = 'wgenerator';
 }

src/app/app.module.ts

@@ -15,6 +15,7 @@ import {AngularFireAuthModule} from '@angular/fire/auth';
 import {AngularFireAuthGuardModule} from '@angular/fire/auth-guard';
 import {MAT_DATE_LOCALE} from '@angular/material/core';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
 
 @NgModule({
   declarations: [
@@ -36,6 +37,7 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
     AngularFireAuthModule,
     AngularFireAuthGuardModule,
     FontAwesomeModule,
+    PerfectScrollbarModule,
 
   ],
   providers: [

src/styles/styles.less

@@ -75,3 +75,9 @@ body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
+
+perfect-scrollbar.scroll > .ps.ps--scrolling-y > .ps__rail-y,
+perfect-scrollbar.scroll > .ps .ps__rail-y:hover {
+  background-color: #222;
+  opacity: .3;
+}