Add custom scrolling logic to make horizontal scrolls better

src/components/Combat.vue

@@ -145,19 +145,26 @@ export default class Combat extends Vue {
     return !creature.destroyed
   }
 
+  doScroll (target: HTMLElement, speed: number, t: number) {
+    if (t <= 0.25) {
+      target.scrollBy(speed / 20 - speed / 20 * Math.abs(0.125 - t) * 8, 0)
+      setTimeout(() => this.doScroll(target, speed, t + 1 / 60), 1000 / 60)
+    }
+  }
+
   horizWheelLeft (event: MouseWheelEvent) {
-    const target = this.$el.querySelector("#left-stats")
+    const target = this.$el.querySelector("#left-stats") as HTMLElement
 
     if (target !== null) {
-      target.scrollBy({ top: 0, left: event.deltaY, behavior: 'smooth' })
+      this.doScroll(target, event.deltaY * 2, 0)
     }
   }
 
   horizWheelRight (event: MouseWheelEvent) {
-    const target = this.$el.querySelector("#right-stats")
+    const target = this.$el.querySelector("#right-stats") as HTMLElement
 
     if (target !== null) {
-      target.scrollBy({ top: 0, left: event.deltaY, behavior: 'smooth' })
+      this.doScroll(target, event.deltaY * 2, 0)
     }
   }