From a1cc2c9fe44381bcbe5531b1100c5656998a55f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8A=E3=81=95=E3=82=80=E3=81=AE=E3=81=B2=E3=81=A8?= <46447427+samunohito@users.noreply.github.com> Date: Mon, 19 Aug 2024 16:32:00 +0900 Subject: [PATCH 1/4] fix --- packages/frontend/src/components/MkPagination.vue | 9 ++------- packages/frontend/src/scripts/scroll.ts | 10 +++++++++- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue index 62a85389ad96..297eddfd8fc2 100644 --- a/packages/frontend/src/components/MkPagination.vue +++ b/packages/frontend/src/components/MkPagination.vue @@ -125,8 +125,6 @@ const items = ref(new Map()); */ const queue = ref(new Map()); -const offset = ref(0); - /** * 初期化中かどうか（trueならMkLoadingで全て隠す） */ @@ -223,7 +221,6 @@ async function init(): Promise { more.value = true; } - offset.value = res.length; error.value = false; fetching.value = false; }, err => { @@ -244,7 +241,7 @@ const fetchMore = async (): Promise => { ...params, limit: SECOND_FETCH_LIMIT, ...(props.pagination.offsetMode ? { - offset: offset.value, + offset: items.value.size, } : { untilId: Array.from(items.value.keys()).at(-1), }), @@ -294,7 +291,6 @@ const fetchMore = async (): Promise => { moreFetching.value = false; } } - offset.value += res.length; }, err => { moreFetching.value = false; }); @@ -308,7 +304,7 @@ const fetchMoreAhead = async (): Promise => { ...params, limit: SECOND_FETCH_LIMIT, ...(props.pagination.offsetMode ? { - offset: offset.value, + offset: items.value.size, } : { sinceId: Array.from(items.value.keys()).at(-1), }), @@ -320,7 +316,6 @@ const fetchMoreAhead = async (): Promise => { items.value = concatMapWithArray(items.value, res); more.value = true; } - offset.value += res.length; moreFetching.value = false; }, err => { moreFetching.value = false; diff --git a/packages/frontend/src/scripts/scroll.ts b/packages/frontend/src/scripts/scroll.ts index f0274034b5b3..65b1d9d7cb30 100644 --- a/packages/frontend/src/scripts/scroll.ts +++ b/packages/frontend/src/scripts/scroll.ts @@ -45,9 +45,16 @@ export function onScrollTop(el: HTMLElement, cb: () => unknown, tolerance = 1, o const container = getScrollContainer(el) ?? window; + // 以下のケースにおいて、cbが何度も呼び出されてしまって具合が悪いので1回呼んだら以降は無視するようにする + // - スクロールイベントは1回のスクロールで複数回発生することがある + // - toleranceの範囲内に収まる程度の微量なスクロールが発生した + let prevTopVisible = false; const onScroll = ev => { if (!document.body.contains(el)) return; - if (isTopVisible(el, tolerance)) { + + const topVisible = isTopVisible(el, tolerance); + if (topVisible !== prevTopVisible) { + prevTopVisible = topVisible; cb(); if (once) removeListener(); } @@ -126,6 +133,7 @@ export function scrollToBottom( export function isTopVisible(el: HTMLElement, tolerance = 1): boolean { const scrollTop = getScrollPosition(el); + console.log(scrollTop); return scrollTop <= tolerance; } From f0471a938177e5f6f97d373c17bede2f672b2004 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8A=E3=81=95=E3=82=80=E3=81=AE=E3=81=B2=E3=81=A8?= <46447427+samunohito@users.noreply.github.com> Date: Mon, 19 Aug 2024 16:57:37 +0900 Subject: [PATCH 2/4] fix --- packages/frontend/src/components/MkPagination.vue | 4 +++- packages/frontend/src/scripts/scroll.ts | 13 +++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue index 297eddfd8fc2..ef6bf4d90ebb 100644 --- a/packages/frontend/src/components/MkPagination.vue +++ b/packages/frontend/src/components/MkPagination.vue @@ -177,7 +177,9 @@ watch([backed, contentEl], () => { if (!backed.value) { if (!contentEl.value) return; - scrollRemove.value = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl.value, executeQueue, TOLERANCE); + scrollRemove.value = props.pagination.reversed + ? onScrollBottom(contentEl.value, executeQueue, TOLERANCE) + : onScrollTop(contentEl.value, (topVisible) => { if (topVisible) executeQueue(); }, TOLERANCE); } else { if (scrollRemove.value) scrollRemove.value(); scrollRemove.value = null; diff --git a/packages/frontend/src/scripts/scroll.ts b/packages/frontend/src/scripts/scroll.ts index 65b1d9d7cb30..08d0d1c927e9 100644 --- a/packages/frontend/src/scripts/scroll.ts +++ b/packages/frontend/src/scripts/scroll.ts @@ -36,10 +36,11 @@ export function getScrollPosition(el: HTMLElement | null): number { return container == null ? window.scrollY : container.scrollTop; } -export function onScrollTop(el: HTMLElement, cb: () => unknown, tolerance = 1, once = false) { +export function onScrollTop(el: HTMLElement, cb: (topVisible: boolean) => unknown, tolerance = 1, once = false) { // とりあえず評価してみる - if (el.isConnected && isTopVisible(el)) { - cb(); + const firstTopVisible = isTopVisible(el); + if (el.isConnected && firstTopVisible) { + cb(firstTopVisible); if (once) return null; } @@ -48,14 +49,14 @@ export function onScrollTop(el: HTMLElement, cb: () => unknown, tolerance = 1, o // 以下のケースにおいて、cbが何度も呼び出されてしまって具合が悪いので1回呼んだら以降は無視するようにする // - スクロールイベントは1回のスクロールで複数回発生することがある // - toleranceの範囲内に収まる程度の微量なスクロールが発生した - let prevTopVisible = false; + let prevTopVisible = firstTopVisible; const onScroll = ev => { if (!document.body.contains(el)) return; const topVisible = isTopVisible(el, tolerance); if (topVisible !== prevTopVisible) { prevTopVisible = topVisible; - cb(); + cb(topVisible); if (once) removeListener(); } }; @@ -133,7 +134,7 @@ export function scrollToBottom( export function isTopVisible(el: HTMLElement, tolerance = 1): boolean { const scrollTop = getScrollPosition(el); - console.log(scrollTop); + console.log(scrollTop, tolerance, scrollTop <= tolerance); return scrollTop <= tolerance; } From 7094580a92a465cc5a5d4a917d694aa93a68a245 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8A=E3=81=95=E3=82=80=E3=81=AE=E3=81=B2=E3=81=A8?= <46447427+samunohito@users.noreply.github.com> Date: Mon, 19 Aug 2024 17:35:50 +0900 Subject: [PATCH 3/4] fix CHANGELOG.md --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0de0d408778f..4797a690dfac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 2024.x.x (Unreleased) + +### Client +- Fix: 一部画面のページネーションが動作しにくくなっていたのを修正 ( #12766 , #11449 ) + ## 2024.8.0 ### General From ce10dc0b6522276dda92a299c332210c8f5b5b20 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sat, 21 Sep 2024 11:28:24 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E9=96=8B=E7=99=BA=E7=92=B0=E5=A2=83?= =?UTF-8?q?=E4=BB=A5=E5=A4=96=E3=81=A7=E3=83=AD=E3=82=B0=E3=81=8C=E5=87=BA?= =?UTF-8?q?=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend-shared/js/scroll.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend-shared/js/scroll.ts b/packages/frontend-shared/js/scroll.ts index 81a111822d77..4f2e9105c340 100644 --- a/packages/frontend-shared/js/scroll.ts +++ b/packages/frontend-shared/js/scroll.ts @@ -50,7 +50,7 @@ export function onScrollTop(el: HTMLElement, cb: (topVisible: boolean) => unknow // - スクロールイベントは1回のスクロールで複数回発生することがある // - toleranceの範囲内に収まる程度の微量なスクロールが発生した let prevTopVisible = firstTopVisible; - const onScroll = ev => { + const onScroll = () => { if (!document.body.contains(el)) return; const topVisible = isTopVisible(el, tolerance); @@ -134,7 +134,7 @@ export function scrollToBottom( export function isTopVisible(el: HTMLElement, tolerance = 1): boolean { const scrollTop = getScrollPosition(el); - console.log(scrollTop, tolerance, scrollTop <= tolerance); + if (_DEV_) console.log(scrollTop, tolerance, scrollTop <= tolerance); return scrollTop <= tolerance; }