fix: iPadでdeck uiでマウスホイールでスクロールできない (misskey-dev#15244)

commit b299046
Author: anatawa12 <[email protected]>
Date:   Thu Jan 9 20:23:25 2025 +0900

    docs(changelog): iPadOSでdeck uiをマウスカーソルによってスクロールできない問題を修正

commit 8a531b7
Author: anatawa12 <[email protected]>
Date:   Thu Jan 9 20:11:34 2025 +0900

    fix: ipadでdeck uiでスクロールできない

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Feat: 投稿フォームで画像をプレビュー可能に
 - Enhance: アンテナ、リスト等の名前をカラム名のデフォルト値にするように
 - Fix: ログインしていないときに VRTL が見えない問題
+- Fix: iPadOSでdeck uiをマウスカーソルによってスクロールできない問題を修正
 
 ### Server
 - Enhance: スレッドミュートにおいて、リノート、引用、リアクションの通知もミュートするように

packages/frontend/src/ui/deck.vue

@@ -10,13 +10,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.main">
 		<XAnnouncements v-if="$i"/>
 		<XStatusBars/>
-		<div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.self="onWheel">
+		<!-- passive: https://bugs.webkit.org/show_bug.cgi?id=281300 -->
+		<div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.passive.self="onWheel">
 			<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
 			<section
 				v-for="ids in layout"
 				:class="$style.section"
 				:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
-				@wheel.self="onWheel"
+				@wheel.passive.self="onWheel"
 			>
 				<component
 					:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
@@ -150,7 +151,8 @@ window.addEventListener('resize', () => {
 	isMobile.value = window.innerWidth <= 500;
 });
 
-const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet';
+// ポインターイベント非対応用に初期値はUAから出す
+const snapScroll = ref(deviceKind === 'smartphone' || deviceKind === 'tablet');
 const drawerMenuShowing = ref(false);
 
 /*
@@ -201,8 +203,18 @@ const onContextmenu = (ev) => {
 	}], ev);
 };
 
+// タッチでスクロールしてるときはスナップスクロールを有効にする
+function pointerEvent(ev: PointerEvent) {
+	snapScroll.value = ev.pointerType === 'touch';
+}
+
+document.addEventListener('pointerdown', pointerEvent);
+document.addEventListener('pointermove', pointerEvent);
+document.addEventListener('pointerup', pointerEvent);
+
 function onWheel(ev: WheelEvent) {
 	if (ev.deltaX === 0 && columnsEl.value != null) {
+		snapScroll.value = false;
 		columnsEl.value.scrollLeft += ev.deltaY;
 	}
 }

packages/frontend/src/ui/deck/column.vue

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@dragstart="onDragstart"
 		@dragend="onDragend"
 		@contextmenu.prevent.stop="onContextmenu"
-		@wheel="emit('headerWheel', $event)"
+		@wheel.passive="emit('headerWheel', $event)"
 	>
 		<svg viewBox="0 0 256 128" :class="$style.tabShape">
 			<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">