diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue index 54a1980c5..335e82473 100644 --- a/packages/frontend/src/components/MkPagination.vue +++ b/packages/frontend/src/components/MkPagination.vue @@ -226,6 +226,25 @@ watch([$$(weakBacked), $$(contentEl)], () => { return removeListener; })(); }); + +/** + * アイテムを上に追加した場合に追加分だけスクロールを下にずらす + * @param fn DOM操作(unshiftItemsなどで) + */ +function adjustScroll(fn: () => void) { + const oldHeight = scrollableElement.scrollHeight; + const oldScroll = scrollableElement.scrollTop; + fn(); + return nextTick(() => { + const top = oldScroll + (scrollableElement.scrollHeight - oldHeight); + scroll(scrollableElement, { top, behavior: 'instant' }); + if (top > TOLERANCE) { + weakBacked = true; + backed = true; + } + return nextTick(); + }); +} //#endregion /** @@ -493,7 +512,7 @@ function unshiftItems(newItems: MisskeyEntity[], limit = displayLimit.value) { const length = newItems.length + items.value.size; items.value = new Map([...arrayToEntries(newItems), ...items.value].slice(0, limit)); - if (length >= displayLimit.value) more.value = true; + if (length >= limit) more.value = true; } /** @@ -507,9 +526,16 @@ function concatItems(oldItems: MisskeyEntity[]) { if (length >= displayLimit.value) more.value = true; } -function executeQueue() { +async function executeQueue() { const queueArr = Array.from(queue.value.entries()); - unshiftItems(queueArr.slice(0, props.pagination.limit).map(v => v[1]).reverse()); + adjustScroll(() => { + unshiftItems( + queueArr.slice(0, props.pagination.limit).map(v => v[1]).reverse(), + Infinity, + ); + }).then(() => { + items.value = new Map([...items.value].slice(0, displayLimit.value)); + }); queue.value = new Map(queueArr.slice(props.pagination.limit)); }