diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 6da6ad506d..270a92a5ee 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -9,6 +9,7 @@
class="columns"
:class="deckStore.reactiveState.columnAlign.value"
@contextmenu.self.prevent="onContextmenu"
+ @wheel.self="onWheel"
>
@@ -31,6 +32,7 @@
) + 'px',
}
"
+ @wheel.self="onWheel"
>
@@ -279,18 +282,15 @@ const onContextmenu = (ev) => {
);
};
-document.documentElement.style.overflowY = "hidden";
-document.documentElement.style.scrollBehavior = "auto";
-window.addEventListener("wheel", (ev) => {
- if (ev.target === columnsEl && ev.deltaX === 0) {
- columnsEl.scrollLeft += ev.deltaY;
- } else if (
- getScrollContainer(ev.target as HTMLElement) == null &&
- ev.deltaX === 0
- ) {
+function onWheel(ev: WheelEvent) {
+ if (ev.deltaX === 0) {
columnsEl.scrollLeft += ev.deltaY;
}
-});
+}
+
+document.documentElement.style.overflowY = "hidden";
+document.documentElement.style.scrollBehavior = "auto";
+
loadDeck();
function moveFocus(id: string, direction: "up" | "down" | "left" | "right") {
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index 03859abc0a..dcf94b31a7 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -23,6 +23,7 @@
@dragstart="onDragstart"
@dragend="onDragend"
@contextmenu.prevent.stop="onContextmenu"
+ @wheel="emit('headerWheel', $event)"
>