From 47b6f466ec0031478a246a02e8dd2bab156fb0da Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 19 Feb 2023 19:54:19 +0900
Subject: [PATCH] enhance(client): snap scroll on deck

---
 packages/frontend/src/ui/deck.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index ef29b2e72..4e9335959 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -4,7 +4,7 @@
 
 	<div :class="$style.main">
 		<XStatusBars/>
-		<div ref="columnsEl" :class="[$style.columns, deckStore.reactiveState.columnAlign.value]" @contextmenu.self.prevent="onContextmenu">
+		<div ref="columnsEl" :class="[$style.columns, deckStore.reactiveState.columnAlign.value, { [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu">
 			<template v-for="ids in layout">
 				<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
 				<section
@@ -115,6 +115,7 @@ window.addEventListener('resize', () => {
 	isMobile.value = window.innerWidth <= 500;
 });
 
+const snapScroll = isMobile;
 const drawerMenuShowing = ref(false);
 
 const route = 'TODO';
@@ -297,9 +298,14 @@ async function deleteProfile() {
 			margin-right: auto;
 		}
 	}
+
+	&.snapScroll {
+		scroll-snap-type: x mandatory;
+	}
 }
 
 .column {
+	scroll-snap-align: start;
 	flex-shrink: 0;
 	border-right: solid var(--deckDividerThickness) var(--deckDivider);