💄 Site > Code > Hide scrollbar

site/src/components/application/script.js

@@ -19,5 +19,34 @@ export default
         {
             return this.$store.state.projects.current
         }
+    },
+
+    mounted()
+    {
+        this.testScrollbar()
+    },
+
+    methods:
+    {
+        testScrollbar()
+        {
+            // Create dummy
+            const dummy = document.createElement("div")
+
+            dummy.style.width = '100px'
+            dummy.style.height = '100px'
+            dummy.style.overflow = 'scroll'
+            dummy.style.position = 'absolute'
+            dummy.style.top = '-9999px'
+
+            this.$el.appendChild(dummy)
+
+            // Get the scrollbar width
+            const scrollbarWidth = dummy.offsetWidth - dummy.clientWidth
+            this.$store.commit('updateScrollbarWidth', scrollbarWidth)
+
+            // Delete the DIV
+            this.$el.removeChild(dummy)
+        }
     }
 }

site/src/components/viewer/script.js

@@ -32,6 +32,11 @@ export default
         currentLine()
         {
             return this.$store.state.files.currentLine
+        },
+
+        scrollbarWidth()
+        {
+            return this.$store.state.scrollbarWidth
         }
     },
 

site/src/components/viewer/style.styl

@@ -17,17 +17,26 @@
     top 30px
     right 0
     width 100%
-    height 100%
+    bottom 0
     font-family Inconsolata, Monaco, Consolas, 'Courier New', Courier
     line-height 20px
     letter-spacing 0.5px
     font-size 15px
     background #2d2d49
-    overflow scroll
+    overflow hidden
 
     .version-active &
         width 75%
 
+.scroll-hack
+    position absolute
+    top 0
+    left 0
+    bottom -15px
+    right -15px
+    overflow scroll
+
+
 .lines
     position absolute
     top 0
@@ -90,7 +99,7 @@
 
 .hljs
     display block
-    overflow-x auto
+    // overflow-x auto
     color #abb2bf
 
 .hljs-comment

site/src/components/viewer/template.html

@@ -1,12 +1,14 @@
 <div class="viewer" v-if="version">
-    <pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
+    <div class="scroll-hack" :style="`bottom:-${scrollbarWidth}px;right:-${scrollbarWidth}px;`">
-    <div class="lines">
+        <pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
-        <div class="line" v-for="line in linesCount" @click.prevent="onLineClick(line)">
+        <div class="lines">
-            <span class="added" v-if="version.addedLines.indexOf(line - 1) !== -1 && differencesActive">+</span>
+            <div class="line" v-for="line in linesCount" @click.prevent="onLineClick(line)">
-            <span class="removed" v-if="version.removedLines.indexOf(line - 1) !== -1 && differencesActive">-</span>
+                <span class="added" v-if="version.addedLines.indexOf(line - 1) !== -1 && differencesActive">+</span>
-            <span class="index">{{ line }}.</span>
+                <span class="removed" v-if="version.removedLines.indexOf(line - 1) !== -1 && differencesActive">-</span>
-            <span class="question">?</span>
+                <span class="index">{{ line }}.</span>
-            <span class="active" v-if="line === currentLine">!</span>
+                <span class="question">?</span>
+                <span class="active" v-if="line === currentLine">!</span>
+            </div>
         </div>
     </div>
 </div>

site/src/store/index.js

@@ -17,7 +17,8 @@ export default new Vuex.Store({
 
     state:
     {
-        url: ''
+        url: '',
+        scrollbarWidth: 0
     },
 
     mutations:
@@ -25,6 +26,11 @@ export default new Vuex.Store({
         updateUrl(state, data)
         {
             state.url = data
+        },
+
+        updateScrollbarWidth(state, data)
+        {
+            state.scrollbarWidth = data
         }
     }
 })