perfect scrollbar

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;
+}