diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-02-19 19:54:19 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-02-19 19:54:19 +0900 |
| commit | 47b6f466ec0031478a246a02e8dd2bab156fb0da (patch) | |
| tree | 938828bb1646b6833fdae6deb15ab2957f587764 | |
| parent | Merge branch 'develop' of https://github.com/misskey-dev/misskey into develop (diff) | |
| download | sharkey-47b6f466ec0031478a246a02e8dd2bab156fb0da.tar.gz sharkey-47b6f466ec0031478a246a02e8dd2bab156fb0da.tar.bz2 sharkey-47b6f466ec0031478a246a02e8dd2bab156fb0da.zip | |
enhance(client): snap scroll on deck
| -rw-r--r-- | packages/frontend/src/ui/deck.vue | 8 |
1 files changed, 7 insertions, 1 deletions
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue index ef29b2e72f..4e93359591 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); |