From a886e119c1cd5d4cdf629715cba19d14ba6fe4ba Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Tue, 28 Jul 2020 16:19:51 -0400 Subject: [PATCH] Add custom scrolling logic to make horizontal scrolls better --- src/components/Combat.vue | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/Combat.vue b/src/components/Combat.vue index 17bd482..aca4942 100644 --- a/src/components/Combat.vue +++ b/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) } }