enhance(frontend): improve pull to refresh

packages/frontend/src/components/MkPageWindow.vue

@@ -166,7 +166,7 @@ defineExpose({
 
 <style lang="scss" module>
 .root {
-	overscroll-behavior: none;
+	overscroll-behavior: contain;
 
 	min-height: 100%;
 	background: var(--bg);

packages/frontend/src/components/MkPullToRefresh.vue

@@ -23,9 +23,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, watch } from 'vue';
 import { deviceKind } from '@/scripts/device-kind.js';
 import { i18n } from '@/i18n.js';
+import { getScrollContainer } from '@/scripts/scroll.js';
 
 const SCROLL_STOP = 10;
 const MAX_PULL_DISTANCE = Infinity;
@@ -57,18 +58,6 @@ const emit = defineEmits<{
 	(ev: 'refresh'): void;
 }>();
 
-function getScrollableParentElement(node) {
-	if (node == null) {
-		return null;
-	}
-
-	if (node.scrollHeight > node.clientHeight) {
-		return node;
-	} else {
-		return getScrollableParentElement(node.parentNode);
-	}
-}
-
 function getScreenY(event) {
 	if (supportPointerDesktop) {
 		return event.screenY;
@@ -138,12 +127,9 @@ function moveEnd() {
 	}
 }
 
-function moving(event) {
+function moving(event: TouchEvent | PointerEvent) {
 	if (!isPullStart || isRefreshing || disabled) return;
 
-	if (!scrollEl) {
-		scrollEl = getScrollableParentElement(rootEl);
-	}
 	if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + pullDistance)) {
 		pullDistance = 0;
 		isPullEnd = false;
@@ -159,6 +145,10 @@ function moving(event) {
 	const moveHeight = moveScreenY - startScreenY!;
 	pullDistance = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
 
+	if (pullDistance > 0) {
+		if (event.cancelable) event.preventDefault();
+	}
+
 	isPullEnd = pullDistance >= FIRE_THRESHOLD;
 }
 
@@ -178,24 +168,48 @@ function setDisabled(value) {
 	disabled = value;
 }
 
-onMounted(() => {
+function onScrollContainerScroll() {
-	// マウス操作でpull to refreshするのは不便そう
+	const scrollPos = scrollEl!.scrollTop;
-	//supportPointerDesktop = !!window.PointerEvent && deviceKind === 'desktop';
 
-	if (supportPointerDesktop) {
+	// When at the top of the page, disable vertical overscroll so passive touch listeners can take over.
-		rootEl.addEventListener('pointerdown', moveStart);
+	if (scrollPos === 0) {
-		// ポインターの場合、ポップアップ系の動作をするとdownだけ発火されてupが発火されないため
+		scrollEl!.style.touchAction = 'pan-x pan-down pinch-zoom';
-		window.addEventListener('pointerup', moveEnd);
+		registerEventListenersForReadyToPull();
-		rootEl.addEventListener('pointermove', moving, { passive: true });
 	} else {
-		rootEl.addEventListener('touchstart', moveStart);
+		scrollEl!.style.touchAction = 'auto';
-		rootEl.addEventListener('touchend', moveEnd);
+		unregisterEventListenersForReadyToPull();
-		rootEl.addEventListener('touchmove', moving, { passive: true });
 	}
+}
+
+function registerEventListenersForReadyToPull() {
+	if (rootEl == null) return;
+	rootEl.addEventListener('touchstart', moveStart, { passive: true });
+	rootEl.addEventListener('touchmove', moving, { passive: false }); // passive: falseにしないとpreventDefaultが使えない
+}
+
+function unregisterEventListenersForReadyToPull() {
+	if (rootEl == null) return;
+	rootEl.removeEventListener('touchstart', moveStart);
+	rootEl.removeEventListener('touchmove', moving);
+}
+
+onMounted(() => {
+	if (rootEl == null) return;
+
+	scrollEl = getScrollContainer(rootEl);
+	if (scrollEl == null) return;
+
+	scrollEl.addEventListener('scroll', onScrollContainerScroll, { passive: true });
+
+	rootEl.addEventListener('touchend', moveEnd, { passive: true });
+
+	registerEventListenersForReadyToPull();
 });
 
 onUnmounted(() => {
-	if (supportPointerDesktop) window.removeEventListener('pointerup', moveEnd);
+	if (scrollEl) scrollEl.removeEventListener('scroll', onScrollContainerScroll);
+
+	unregisterEventListenersForReadyToPull();
 });
 
 defineExpose({

packages/frontend/src/ui/universal.vue

@@ -324,7 +324,7 @@ $widgets-hide-threshold: 1090px;
 	min-width: 0;
 	overflow: auto;
 	overflow-y: scroll;
-	overscroll-behavior: none;
+	overscroll-behavior: contain;
 	background: var(--bg);
 }