wip

packages/frontend/src/components/MkPagination.vue

@@ -41,7 +41,7 @@
 import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
-import { onScrollTop, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll } from '@/scripts/scroll';
+import { isBottomVisible, isTopVisible, getBodyScrollHeight, getScrollContainer, scrollToBottom, scroll } from '@/scripts/scroll';
 import { useDocumentVisibility } from '@/scripts/use-document-visibility';
 import MkButton from '@/components/MkButton.vue';
 import { defaultStore } from '@/store';
@@ -113,6 +113,7 @@ let rootEl = $shallowRef<HTMLElement>();
  * スクロールが先頭にない場合にtrue
  */
 let backed = $ref(false);
+let weakBacked = $ref(false);
 
 let scrollRemove = $ref<(() => void) | null>(null);
 
@@ -153,7 +154,7 @@ const {
 const displayLimit = computed(() => props.pagination.displayLimit ?? props.pagination.limit * 2);
 
 const contentEl = $computed(() => props.pagination.pageEl ?? rootEl);
-const scrollableElement = $computed(() => contentEl ? getScrollContainer(contentEl) : document.body);
+const scrollableElement = $computed(() => contentEl ? getScrollContainer(contentEl) ?? document.body : document.body);
 
 const visibility = useDocumentVisibility();
 
@@ -172,7 +173,8 @@ watch([() => props.pagination.reversed, $$(scrollableElement)], () => {
 	if (scrollObserver) scrollObserver.disconnect();
 
 	scrollObserver = new IntersectionObserver(entries => {
-		backed = entries[0].isIntersecting;
+		weakBacked = entries[0].isIntersecting;
+		if (weakBacked) backed = true;
 	}, {
 		root: scrollableElement,
 		rootMargin: props.pagination.reversed ? '-100% 0px 100% 0px' : '100% 0px -100% 0px',
@@ -190,15 +192,46 @@ watch($$(rootEl), () => {
 /**
  * onScrollTop/onScrollBottomで細かく検出する
  */
-watch([$$(backed), $$(contentEl)], () => {
+function onHead() {
-	if (!contentEl) return;
+	console.log('onHead');
+	backed = false;
+	executeQueue();
+}
 
-	if (!backed) {
+function onBacked() {
-		scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, executeQueue, TOLERANCE);
+	backed = true;
-	} else {
+}
+
+watch([$$(weakBacked), $$(contentEl)], () => {
+	if (weakBacked || !contentEl) {
 		if (scrollRemove) scrollRemove();
 		scrollRemove = null;
+		return;
 	}
+
+	scrollRemove = (() => {
+		const checkFn = props.pagination.reversed ? isBottomVisible : isTopVisible;
+		const el = contentEl;
+		const tolerance = TOLERANCE;
+
+		const onScroll = () => {
+			if (!document.body.contains(el)) return;
+			if (checkFn(el, tolerance)) {
+				onHead();
+			} else {
+				onBacked();
+			}
+		};
+
+		// とりあえず評価してみる
+		onScroll();
+
+		const container = scrollableElement;
+
+		function removeListener() { container.removeEventListener('scroll', onScroll); }
+		container.addEventListener('scroll', onScroll, { passive: true });
+		return removeListener;
+	})();
 });
 //#endregion
 
@@ -516,7 +549,6 @@ onBeforeUnmount(() => {
 defineExpose({
 	items,
 	queue,
-	backed,
 	more,
 	inited,
 	reload,