💄 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,4 +1,5 @@
 <div class="viewer" v-if="version">
+    <div class="scroll-hack" :style="`bottom:-${scrollbarWidth}px;right:-${scrollbarWidth}px;`">
         <pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
         <div class="lines">
             <div class="line" v-for="line in linesCount" @click.prevent="onLineClick(line)">
@@ -10,3 +11,4 @@
             </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
         }
     }
 })