Add custom scroll bar

package-lock.json

@@ -8771,6 +8771,12 @@
         "picomatch": "^2.2.1"
       }
     },
+    "reflect-metadata": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
+      "dev": true
+    },
     "regenerate": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
@@ -10788,6 +10794,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuescroll": {
+      "version": "4.16.1",
+      "resolved": "https://registry.npmjs.org/vuescroll/-/vuescroll-4.16.1.tgz",
+      "integrity": "sha512-7fRsG2Yw5Z07LUz/IIu9barpmYiN9q+ZTC+CrVamvCbmsxyhz8mU1OuYFbfORysaUskioNMxTGDo+HOzeDfSyQ=="
+    },
     "watchpack": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz",

package.json

@@ -12,13 +12,15 @@
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^8.4.2",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "vuescroll": "^4.16.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "reflect-metadata": "^0.1.13",
     "typescript": "~3.9.3",
     "vue-template-compiler": "^2.6.11"
   }

src/App.vue

@@ -24,16 +24,22 @@
           <span class="close-btn-label"
                :class="{'close-btn-label-when-left-panel-open': !leftPanelClosed}">MENU</span>
       </div>
+      
+      <vue-scroll style="height: 100vh" :ops="{scrollPanel: {scrollingX: false}}">
         <router-view class="w-100 content-body"
                     :class="{'content-body-when-left-panel-open': !leftPanelClosed}"
                     style="min-height: 100vh"
                     :leftPanelClosed="leftPanelClosed"/>
+      </vue-scroll>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Ref } from 'vue-property-decorator';
+import 'reflect-metadata';
+import { Component, Vue, Ref } from 'vue-property-decorator';
+
+import VueScroll, { Config } from 'vuescroll';
 
 import LeftPanel from '@/components/LeftPanel.vue'
 
@@ -62,7 +68,8 @@ interface ILottieAnimation {
 @Component({
   components: {
     LeftPanel,
-    LottieAnimation
+    LottieAnimation,
+    VueScroll,
   },
 })
 export default class App extends Vue {
@@ -105,6 +112,7 @@ body, #app {
   letter-spacing: 1px;
   font-weight: 700;
   background-color: black;
+  overflow: hidden;
 }
 
 .close-btn-hover:hover {
@@ -190,6 +198,7 @@ body, #app {
     background-color: rgba(0, 0, 0, 0.7)!important;
     transition: background-color linear .3s;
     opacity: 1!important;
+    z-index: 1;
   }
 
   .close-btn-when-left-panel-open {

src/components/Album.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="element" class="album"
       :style="{'background-image': backgroundStyle,
-               'min-height': height}">
+               'height': height}">
     {{ data.name }}
   </div>
 </template>
@@ -34,8 +34,6 @@ export default class Album extends Vue {
     if (this.element === undefined)
       return;
 
-    console.log("update");
-
     this.height = `${this.element.clientWidth}px`;
   }
 

src/components/LeftBlock.vue

@@ -63,6 +63,7 @@ export default class LeftBlock extends Vue {
 
 @media (min-width: 960px) {
   .left-block {
+    position:fixed;
     background-size: cover;
     min-height: 100vh;
     width: 405px;

src/views/Home.vue

@@ -4,17 +4,21 @@
     <div class="albums-wrapper">
       <div class="albums">
         <Album v-for="album in albums" :key="album.folderName" :data="album"></Album>
+        <!-- ToDO: Delete -->
+        <Album v-for="album in albums" :key="album.folderName + 'copy'" :data="album"></Album>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import 'reflect-metadata';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
 import LeftBlock from '@/components/LeftBlock.vue';
 import Album, { IAlbum } from '@/components/Album.vue';
 
+
 @Component({
   name: 'Home',
   components: {
@@ -87,7 +91,9 @@ export default class Home extends Vue {
 
 @media (min-width: 960px) {
   .albums-wrapper {
-    width: calc(100vw - 425px);
+    width: calc(100vw - 405px);
+    margin-left: 405px;
+
   }
 }