Add custom scroll bar

src/App.vue

@@ -24,16 +24,22 @@
           <span class="close-btn-label"
                :class="{'close-btn-label-when-left-panel-open': !leftPanelClosed}">MENU</span>
       </div>
-      <router-view class="w-100 content-body"
-                  :class="{'content-body-when-left-panel-open': !leftPanelClosed}"
-                   style="min-height: 100vh"
-                  :leftPanelClosed="leftPanelClosed"/>
+      
+      <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

@@ -3,18 +3,22 @@
     <LeftBlock title="HOME" description="kreorg photos" picture="/pictures/home.jpg" :leftPanelClosed="leftPanelClosed"></LeftBlock>
     <div class="albums-wrapper">
       <div class="albums">
-       <Album v-for="album in albums" :key="album.folderName" :data="album"></Album>
+        <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;
+
   }
 }