horizontal scroll

assets/css/app.scss

@@ -53,8 +53,12 @@ section[role='main-content']{
     margin:0.2em;
     padding:0.2em;
     border-radius: 6px;
+    cursor: pointer;
+    &:hover{
+      background-color: #eee;
+    }
     &:focus, &:active{
-      background-color: #ddd;
+      background-color: #ccc;
     }
   }
 

src/App.vue

@@ -25,6 +25,18 @@
           @click.prevent="onZoom"
           @keyup.enter="onZoom"
         >zoomout</span>
+        <span
+          class="btn scroll"
+          mode="backward"
+          @click.prevent="onScroll"
+          @keyup.enter="onScroll"
+        >go backward</span>
+        <span
+          class="btn scroll"
+          mode="forward"
+          @click.prevent="onScroll"
+          @keyup.enter="onScroll"
+        >go forward</span>
       </div>
     </section>
   </div>
@@ -62,6 +74,13 @@ export default {
       this.$socket.emit('zoom', {
         mode: mode
       })
+    },
+    onScroll (e) {
+      console.log('onScroll', e)
+      let mode = e.originalTarget.getAttribute('mode')
+      this.$socket.emit('scroll', {
+        mode: mode
+      })
     }
   }
 }