From 7fe882d0e29880cc96c50ab91db325f86fc984fe Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 17 Jul 2023 07:38:42 +0000
Subject: [PATCH] wip
---
.../frontend/src/components/MkPagination.vue | 24 +++++++++++--------
1 file changed, 14 insertions(+), 10 deletions(-)
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index e86760d88c..f94392ef1a 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -49,8 +49,7 @@ import { MisskeyEntity } from '@/types/date-separated-list';
import { i18n } from '@/i18n';
const SECOND_FETCH_LIMIT = 30;
-const BACK_TO_TOP_TOLERANCE = 256;
-const TOP_STATIC_TOLERANCE = 64;
+const TOLERANCE = 256;
const APPEAR_MINIMUM_INTERVAL = 600;
const BACKGROUND_PAUSE_WAIT_SEC = 10;
@@ -110,7 +109,9 @@ let rootEl = $shallowRef<HTMLElement>();
* スクロールが先頭にある場合はfalse
* スクロールが先頭にない場合にtrue
*/
+// 先頭にいるか（prependでキューに追加するかどうかの判定に使う）
let backed = $ref(false);
+// true→falseの変更でexecuteQueueする
let weakBacked = $ref(false);
let scrollRemove = $ref<(() => void) | null>(null);
@@ -184,7 +185,8 @@ watch([() => props.pagination.reversed, $$(scrollableElement)], () => {
}, {
root: scrollableElement,
rootMargin: props.pagination.reversed ? '-100% 0px 100% 0px' : '100% 0px -100% 0px',
- threshold: [0.01, 0.05, 0.1], // ターゲットの可視範囲は10%以上（0.01を含めないと検出されないことがある）
+ // 12%以上先頭にいる場合はweakBackedをtrueにしたい
+ threshold: [0, 0.02, 0.04, 0.06, 0.08, 0.10, 0.12],
});
console.log('new scrollObserver', scrollObserver);
}, { immediate: true });
@@ -196,15 +198,17 @@ watch([$$(rootEl), $$(scrollObserver)], () => {
});
/**
- * onScrollTop/onScrollBottomで細かく検出する
+ * weakBackedがtrue→falseになったらexecuteQueue
*/
-watch($$(backed), () => {
- console.log('backed changed', backed);
- if (!backed) {
+watch($$(weakBacked), () => {
+ if (!weakBacked) {
executeQueue();
}
});
+/**
+ * onScrollTop/onScrollBottomでbackedを厳密に検出する
+ */
watch([$$(weakBacked), $$(contentEl)], () => {
if (scrollRemove) scrollRemove();
scrollRemove = null;
@@ -218,7 +222,7 @@ watch([$$(weakBacked), $$(contentEl)], () => {
console.log('weakBacked watcher add scrollRemove', weakBacked, contentEl);
scrollRemove = (() => {
const checkBacked = () => {
- backed = !checkTop(BACK_TO_TOP_TOLERANCE);
+ backed = !checkTop(TOLERANCE);
console.log('checkBacked', backed);
};
@@ -512,7 +516,7 @@ const prepend = (item: MisskeyEntity): void => {
!isPausingUpdate.value && // タブがバックグラウンドの時/スクロール調整中はキューに追加する
queueSize.value === 0 && // キューに残っている場合はキューに追加する
active.value && // keepAliveで隠されている間はキューに追加する
- checkTop(TOP_STATIC_TOLERANCE) // 先頭に表示されていない時はキューに追加する
+ !backed // 先頭に表示されていない時はキューに追加する
) {
if (items.value.has(item.id)) return; // 既にタイムラインにある場合は何もしない
unshiftItems([item]);
@@ -559,7 +563,7 @@ async function executeQueue() {
});
// 念の為backedを再チェック
- weakBacked = !checkTop(BACK_TO_TOP_TOLERANCE);
+ weakBacked = !checkTop(TOLERANCE);
// adjustScrollが終わり次第タイムラインの下側を切り捨てる
denyMoveTransition.value = true;