From 90c6f15a72cf626305e42c8e4730559d0695f045 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Feb 2022 03:37:05 +0900
Subject: [PATCH] aaaaaaaaaaa

---
 .../src/components/date-separated-list.vue    |  18 ++-
 .../components/global/sticky-container.vue    |  92 ++++++-------
 packages/client/src/components/notes.vue      |  14 +-
 .../client/src/components/notifications.vue   |   6 +-
 .../client/src/components/ui/pagination.vue   | 126 +++++++++++++-----
 packages/client/src/components/user-list.vue  |   4 +-
 .../client/src/directives/sticky-container.ts |   2 +
 packages/client/src/pages/admin/emojis.vue    |   8 +-
 packages/client/src/pages/favorites.vue       |   4 +-
 packages/client/src/pages/federation.vue      |   4 +-
 packages/client/src/pages/follow-requests.vue |   4 +-
 packages/client/src/pages/gallery/index.vue   |  16 +--
 packages/client/src/pages/gallery/post.vue    |   4 +-
 .../src/pages/messaging/messaging-room.vue    |  12 +-
 .../client/src/pages/settings/security.vue    |   4 +-
 .../client/src/pages/user/follow-list.vue     |   4 +-
 packages/client/src/pages/user/gallery.vue    |   4 +-
 packages/client/src/scripts/scroll.ts         |  55 ++++++--
 .../client/src/types/date-separated-list.ts   |   7 +
 packages/client/src/ui/visitor/a.vue          |   2 -
 20 files changed, 257 insertions(+), 133 deletions(-)
 create mode 100644 packages/client/src/types/date-separated-list.ts

diff --git a/packages/client/src/components/date-separated-list.vue b/packages/client/src/components/date-separated-list.vue
index 4e9c49f57..3333236e7 100644
--- a/packages/client/src/components/date-separated-list.vue
+++ b/packages/client/src/components/date-separated-list.vue
@@ -1,13 +1,14 @@
 <script lang="ts">
-import { defineComponent, h, PropType, TransitionGroup } from 'vue';
+import { defineComponent, getCurrentInstance, h, markRaw, onMounted, PropType, TransitionGroup } from 'vue';
 import MkAd from '@/components/global/ad.vue';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
+import { MisskeyEntity } from '@/types/date-separated-list';
 
 export default defineComponent({
 	props: {
 		items: {
-			type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
+			type: Array as PropType<MisskeyEntity[]>,
 			required: true,
 		},
 		direction: {
@@ -30,9 +31,15 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		itemsContainer: {
+			type: Object as PropType<HTMLElement | null>,
+			required: false,
+			nullable: true,
+			default: null,
+		},
 	},
 
-	setup(props, { slots, expose }) {
+	setup(props, { slots, expose, emit }) {
 		function getDateText(time: string) {
 			const date = new Date(time).getDate();
 			const month = new Date(time).getMonth() + 1;
@@ -90,6 +97,11 @@ export default defineComponent({
 			}
 		});
 
+		onMounted(() => {
+			const el = getCurrentInstance()?.vnode.el;
+			emit('update:itemsContainer', el ? markRaw(el) : null);
+		});
+
 		function onBeforeLeave(el: HTMLElement) {
 			el.style.top = `${el.offsetTop}px`;
 			el.style.left = `${el.offsetLeft}px`;
diff --git a/packages/client/src/components/global/sticky-container.vue b/packages/client/src/components/global/sticky-container.vue
index 89d397f08..ef4712356 100644
--- a/packages/client/src/components/global/sticky-container.vue
+++ b/packages/client/src/components/global/sticky-container.vue
@@ -1,71 +1,63 @@
 <template>
 <div ref="rootEl">
 	<slot name="header"></slot>
-	<div ref="bodyEl">
+	<div ref="bodyEl" :data-sticky-container-header-height="headerHeight">
 		<slot></slot>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
 
-export default defineComponent({
-	props: {
-		autoSticky: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
+const props = withDefaults(defineProps<{
+	autoSticky?: boolean;
+}>(), {
+	autoSticky: false,
+})
 
-	setup(props, context) {
-		const rootEl = ref<HTMLElement>(null);
-		const bodyEl = ref<HTMLElement>(null);
+const rootEl = $ref<HTMLElement>();
+const bodyEl = $ref<HTMLElement>();
 
-		const calc = () => {
-			const currentStickyTop = getComputedStyle(rootEl.value).getPropertyValue('--stickyTop') || '0px';
+let headerHeight: string | undefined = $ref();
 
-			const header = rootEl.value.children[0];
-			if (header === bodyEl.value) {
-				bodyEl.value.style.setProperty('--stickyTop', currentStickyTop);
-			} else {
-				bodyEl.value.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
+const calc = () => {
+	const currentStickyTop = getComputedStyle(rootEl).getPropertyValue('--stickyTop') || '0px';
 
-				if (props.autoSticky) {
-					header.style.setProperty('--stickyTop', currentStickyTop);
-					header.style.position = 'sticky';
-					header.style.top = 'var(--stickyTop)';
-					header.style.zIndex = '1';
-				}
-			}
-		};
+	const header = rootEl.children[0] as HTMLElement;
+	if (header === bodyEl) {
+		bodyEl.style.setProperty('--stickyTop', currentStickyTop);
+	} else {
+		bodyEl.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
+		headerHeight = header.offsetHeight.toString();
 
-		onMounted(() => {
-			calc();
+		if (props.autoSticky) {
+			header.style.setProperty('--stickyTop', currentStickyTop);
+			header.style.position = 'sticky';
+			header.style.top = 'var(--stickyTop)';
+			header.style.zIndex = '1';
+		}
+	}
+};
 
-			const observer = new MutationObserver(() => {
-				window.setTimeout(() => {
-					calc();
-				}, 100);
-			});
+const observer = new MutationObserver(() => {
+	window.setTimeout(() => {
+		calc();
+	}, 100);
+});
 
-			observer.observe(rootEl.value, {
-				attributes: false,
-				childList: true,
-				subtree: false,
-			});
+onMounted(() => {
+	calc();
 
-			onUnmounted(() => {
-				observer.disconnect();
-			});
-		});
+	observer.observe(rootEl, {
+		attributes: false,
+		childList: true,
+		subtree: false,
+	});
+});
 
-		return {
-			rootEl,
-			bodyEl,
-		};
-	},
+onUnmounted(() => {
+	observer.disconnect();
 });
 </script>
 
diff --git a/packages/client/src/components/notes.vue b/packages/client/src/components/notes.vue
index 41bec5a57..c11b1b059 100644
--- a/packages/client/src/components/notes.vue
+++ b/packages/client/src/components/notes.vue
@@ -7,9 +7,19 @@
 		</div>
 	</template>
 
-	<template #default="{ items: notes }">
+	<template #default="{ items: notes, itemsContainerWrapped }">
 		<div class="giivymft" :class="{ noGap }">
-			<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" class="notes">
+			<XList
+				ref="notes"
+				v-slot="{ item: note }"
+				:items="notes"
+				:direction="pagination.reversed ? 'up' : 'down'"
+				:reversed="pagination.reversed"
+				:no-gap="noGap"
+				:ad="true"
+				v-model:itemsContainer="itemsContainerWrapped.v.value"
+				class="notes"
+			>
 				<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/>
 			</XList>
 		</div>
diff --git a/packages/client/src/components/notifications.vue b/packages/client/src/components/notifications.vue
index 5a77b5487..10ca6dae3 100644
--- a/packages/client/src/components/notifications.vue
+++ b/packages/client/src/components/notifications.vue
@@ -7,8 +7,8 @@
 		</div>
 	</template>
 
-	<template #default="{ items: notifications }">
-		<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
+	<template #default="{ items: notifications, itemsContainerWrapped }">
+		<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true" v-model:itemsContainer="itemsContainerWrapped.v.value">
 			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
 			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
 		</XList>
@@ -29,7 +29,7 @@ import { stream } from '@/stream';
 import { $i } from '@/account';
 
 const props = defineProps<{
-	includeTypes?: PropType<typeof notificationTypes[number][]>;
+	includeTypes?: typeof notificationTypes[number][];
 	unreadOnly?: boolean;
 }>();
 
diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index cf18021b5..489ffad10 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -20,7 +20,7 @@
 			</MkButton>
 			<MkLoading v-else class="loading"/>
 		</div>
-		<slot :items="items" :fetching="fetching || moreFetching"></slot>
+		<slot :items="items" :fetching="fetching || moreFetching" :itemsContainer="itemsContainer" :itemsContainerWrapped="itemsContainerWrapped"></slot>
 		<div v-if="!pagination.reversed" v-show="more" key="_more_" class="cxiknjgy _gap">
 			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
 				{{ $ts.loadMore }}
@@ -32,12 +32,13 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, isRef, nextTick, onActivated, onDeactivated, onMounted, ref, watch } from 'vue';
+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, isTopVisible, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
+import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
 import MkButton from '@/components/ui/button.vue';
 import { defaultStore } from '@/store';
+import { MisskeyEntity } from '@/types/date-separated-list';
 
 const SECOND_FETCH_LIMIT = 30;
 
@@ -75,16 +76,40 @@ const emit = defineEmits<{
 	(e: 'queue', count: number): void;
 }>();
 
-type Item = { id: string; [another: string]: unknown; };
+let rootEl = $ref<HTMLElement>();
 
-const rootEl = $ref<HTMLElement>();
-const items = ref<Item[]>([]);
-const queue = ref<Item[]>([]);
+/*
+ * itemsContainer: itemsの実体DOMsの親コンテナ(=v-forの直上)のHTMLElement
+ *
+ * IntersectionObserverを使用してスクロールのパフォーマンスを向上させるため必要
+ * この中の最初の要素を評価するので、順番を反転したり変えたりしてはいけない
+ * 
+ * これがundefinedのままの場合はrootElにフォールバックする
+ * つまりrootElがitemsの実体DOMsの親であるとする
+ * 
+ * 自動ロードやストリーミングでの追加がなければあまり関係ない
+ */
+let itemsContainer = $ref<HTMLElement | null>();
+/*
+ * date-separated-listとやり取りするために入れ子にしたオブジェクトを用意する
+ * slotの中身から変数を直接書き込むことができないため
+ */
+const itemsContainerWrapped = { v: $$(itemsContainer) };
+
+/*
+ * 遡り中かどうか
+ * ＝ (itemsContainer || rootEl).children.item(0) が画面内に入ったかどうか
+ */
+let backed = $ref(false);
+
+let scrollRemove: (() => void) | null = $ref(null);
+
+const items = ref<MisskeyEntity[]>([]);
+const queue = ref<MisskeyEntity[]>([]);
 const offset = ref(0);
 const fetching = ref(true);
 const moreFetching = ref(false);
 const more = ref(false);
-const backed = ref(false); // 遡り中か否か
 const isBackTop = ref(false);
 const empty = computed(() => items.value.length === 0);
 const error = ref(false);
@@ -92,10 +117,57 @@ const {
 	enableInfiniteScroll
 } = defaultStore.reactiveState;
 
+let mounted = $ref(false);
+
 const contentEl = $computed(() => props.pagination.pageEl || rootEl);
 const scrollableElement = $computed(() => getScrollContainer(contentEl));
 
-const init = async (): Promise<void> => {
+const observer = new IntersectionObserver(entries => {
+	if (entries.some(entry => entry.isIntersecting)) {
+		backed = false;
+	} else {
+		backed = true;
+	}
+});
+
+watch([items, $$(itemsContainer)], observeLatestElement);
+
+function observeLatestElement() {
+	observer.disconnect();
+	nextTick(() => {
+		if (!mounted) return;
+		const latestEl = (itemsContainer || rootEl)?.children.item(0);
+		if (latestEl) observer.observe(latestEl);
+	});
+}
+
+watch($$(backed), () => {
+	if (!backed) {
+		if (!contentEl) return;
+
+		scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, () => {
+			if (queue.value.length === 0) return;
+			for (const item of queue.value) {
+				prepend(item, true);
+			}
+			queue.value = [];
+		});
+	} else {
+		if (scrollRemove) scrollRemove();
+		scrollRemove = null;
+	}
+});
+
+if (props.pagination.params && isRef(props.pagination.params)) {
+	watch(props.pagination.params, init, { deep: true });
+}
+
+watch(queue, (a, b) => {
+	if (a.length === 0 && b.length === 0) return;
+	emit('queue', queue.value.length);
+}, { deep: true });
+
+async function init(): Promise<void> {
 	queue.value = [];
 	fetching.value = true;
 	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
@@ -133,7 +205,6 @@ const reload = (): Promise<void> => {
 const fetchMore = async (): Promise<void> => {
 	if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
 	moreFetching.value = true;
-	backed.value = true;
 	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
 	await os.api(props.pagination.endpoint, {
 		...params,
@@ -150,16 +221,16 @@ const fetchMore = async (): Promise<void> => {
 		}
 
 		const reverseConcat = _res => {
-			const oldHeight = contentEl.scrollHeight;
+			const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight();
 			const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
 
 			items.value = items.value.concat(_res);
 
 			return nextTick(() => {
 				if (scrollableElement) {
-					scroll(scrollableElement, { top: oldScroll + (contentEl.scrollHeight - oldHeight), behavior: 'instant' });
+					scroll(scrollableElement, { top: oldScroll + (scrollableElement.scrollHeight - oldHeight), behavior: 'instant' });
 				} else {
-					window.scrollY = oldScroll + (contentEl.scrollHeight - oldHeight);
+					window.scroll({ top: oldScroll + (getBodyScrollHeight() - oldHeight), behavior: 'instant' });
 				}
 
 				return nextTick();
@@ -225,7 +296,7 @@ const fetchMoreAhead = async (): Promise<void> => {
 	});
 };
 
-const prepend = (item: Item, force = false): void => {
+const prepend = (item: MisskeyEntity, force = false): void => {
 	// 初回表示時はunshiftだけでOK
 	if (!rootEl) {
 		items.value.unshift(item);
@@ -249,33 +320,18 @@ const prepend = (item: Item, force = false): void => {
 		}
 	} else {
 		queue.value.push(item);
-		(props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, () => {
-			for (const item of queue.value) {
-				prepend(item, true);
-			}
-			queue.value = [];
-		});
 	}
 };
 
-const append = (item: Item): void => {
+const append = (item: MisskeyEntity): void => {
 	items.value.push(item);
 };
 
-const updateItem = (id: Item['id'], replacer: (old: Item) => Item): void => {
+const updateItem = (id: MisskeyEntity['id'], replacer: (old: MisskeyEntity) => MisskeyEntity): void => {
 	const i = items.value.findIndex(item => item.id === id);
 	items.value[i] = replacer(items.value[i]);
 };
 
-if (props.pagination.params && isRef(props.pagination.params)) {
-	watch(props.pagination.params, init, { deep: true });
-}
-
-watch(queue, (a, b) => {
-	if (a.length === 0 && b.length === 0) return;
-	emit('queue', queue.value.length);
-}, { deep: true });
-
 const inited = init();
 
 onActivated(() => {
@@ -291,6 +347,8 @@ function toBottom() {
 }
 
 onMounted(() => {
+	mounted = true;
+
 	inited.then(() => {
 		if (props.pagination.reversed) {
 			nextTick(() => {
@@ -304,7 +362,11 @@ onMounted(() => {
 			});
 		}
 	});
-})
+});
+
+onBeforeUnmount(() => {
+	observer.disconnect();
+});
 
 defineExpose({
 	items,
diff --git a/packages/client/src/components/user-list.vue b/packages/client/src/components/user-list.vue
index 3e273721c..a9100c324 100644
--- a/packages/client/src/components/user-list.vue
+++ b/packages/client/src/components/user-list.vue
@@ -7,8 +7,8 @@
 		</div>
 	</template>
 
-	<template #default="{ items: users }">
-		<div class="efvhhmdq">
+	<template #default="{ items: users, itemsContainer }">
+		<div class="efvhhmdq" ref="itemsContainer">
 			<MkUserInfo v-for="user in users" :key="user.id" class="user" :user="user"/>
 		</div>
 	</template>
diff --git a/packages/client/src/directives/sticky-container.ts b/packages/client/src/directives/sticky-container.ts
index 9610eba4d..3cf813054 100644
--- a/packages/client/src/directives/sticky-container.ts
+++ b/packages/client/src/directives/sticky-container.ts
@@ -5,8 +5,10 @@ export default {
 		//const query = binding.value;
 
 		const header = src.children[0];
+		const body = src.children[1];
 		const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px';
 		src.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
+		if (body) body.dataset.stickyContainerHeaderHeight = header.offsetHeight.toString();
 		header.style.setProperty('--stickyTop', currentStickyTop);
 		header.style.position = 'sticky';
 		header.style.top = 'var(--stickyTop)';
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index a080ee9c2..1c7104663 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -19,8 +19,8 @@
 			</div>
 			<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
 				<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
-				<template v-slot="{items}">
-					<div class="ldhfsamy">
+				<template v-slot="{items, itemsContainer}">
+					<div class="ldhfsamy" ref="itemsContainer">
 						<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
 							<img :src="emoji.url" class="img" :alt="emoji.name"/>
 							<div class="body">
@@ -45,8 +45,8 @@
 			</FormSplit>
 			<MkPagination :pagination="remotePagination">
 				<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
-				<template v-slot="{items}">
-					<div class="ldhfsamy">
+				<template v-slot="{items, itemsContainer}">
+					<div class="ldhfsamy" ref="itemsContainer">
 						<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
 							<img :src="emoji.url" class="img" :alt="emoji.name"/>
 							<div class="body">
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index b4f6ff35b..23196fd8b 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -8,8 +8,8 @@
 			</div>
 		</template>
 
-		<template #default="{ items }">
-			<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false">
+		<template #default="{ items, itemsContainerWrapped }">
+			<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false" v-model:itemsContainer="itemsContainerWrapped.v.value">
 				<XNote :key="item.id" :note="item.note" :class="$style.note"/>
 			</XList>
 		</template>
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index 3c5050cdb..5d2c94852 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -41,8 +41,8 @@
 			</FormSplit>
 		</div>
 
-		<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
-			<div class="dqokceoi">
+		<MkPagination v-slot="{items, itemsContainer}" ref="instances" :key="host + state" :pagination="pagination">
+			<div class="dqokceoi" ref="itemsContainer">
 				<MkA v-for="instance in items" :key="instance.id" class="instance" :to="`/instance-info/${instance.host}`">
 					<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
 					<div class="table">
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index 6adc1a404..39fe1b374 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -7,8 +7,8 @@
 				<div>{{ $ts.noFollowRequests }}</div>
 			</div>
 		</template>
-		<template v-slot="{items}">
-			<div class="mk-follow-requests">
+		<template v-slot="{items, itemsContainer}">
+			<div class="mk-follow-requests" ref="itemsContainer">
 				<div v-for="req in items" :key="req.id" class="user _panel">
 					<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
 					<div class="body">
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index a19d69d5c..9be5e4480 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -9,32 +9,32 @@
 	<div v-if="tab === 'explore'">
 		<MkFolder class="_gap">
 			<template #header><i class="fas fa-clock"></i>{{ $ts.recentPosts }}</template>
-			<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
-				<div class="vfpdbgtk">
+			<MkPagination v-slot="{items, itemsContainer}" :pagination="recentPostsPagination" :disable-auto-load="true">
+				<div class="vfpdbgtk" ref="itemsContainer">
 					<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 				</div>
 			</MkPagination>
 		</MkFolder>
 		<MkFolder class="_gap">
 			<template #header><i class="fas fa-fire-alt"></i>{{ $ts.popularPosts }}</template>
-			<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
-				<div class="vfpdbgtk">
+			<MkPagination v-slot="{items, itemsContainer}" :pagination="popularPostsPagination" :disable-auto-load="true">
+				<div class="vfpdbgtk" ref="itemsContainer">
 					<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 				</div>
 			</MkPagination>
 		</MkFolder>
 	</div>
 	<div v-else-if="tab === 'liked'">
-		<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
-			<div class="vfpdbgtk">
+		<MkPagination v-slot="{items, itemsContainer}" :pagination="likedPostsPagination">
+			<div class="vfpdbgtk" ref="itemsContainer">
 				<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
 			</div>
 		</MkPagination>
 	</div>
 	<div v-else-if="tab === 'my'">
 		<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ $ts.postToGallery }}</MkA>
-		<MkPagination v-slot="{items}" :pagination="myPostsPagination">
-			<div class="vfpdbgtk">
+		<MkPagination v-slot="{items, itemsContainer}" :pagination="myPostsPagination">
+			<div class="vfpdbgtk" ref="itemsContainer">
 				<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 			</div>
 		</MkPagination>
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 1755c2328..bb92c9fd5 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -36,8 +36,8 @@
 			<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 			<MkContainer :max-height="300" :foldable="true" class="other">
 				<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
-				<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
-					<div class="sdrarzaf">
+				<MkPagination v-slot="{items, itemsContainer}" :pagination="otherPostsPagination">
+					<div class="sdrarzaf" ref="itemsContainer">
 						<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 					</div>
 				</MkPagination>
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 2329fc48a..88ea4d475 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -14,8 +14,16 @@
 					</div>
 				</template>
 
-				<template #default="{ items: messages, fetching }">
-					<XList v-if="messages.length > 0" v-slot="{ item: message }" :class="{ messages: true, 'deny-move-transition': fetching }" :items="messages" direction="up" reversed>
+				<template #default="{ items: messages, fetching, itemsContainerWrapped }">
+					<XList
+						v-if="messages.length > 0"
+						v-slot="{ item: message }"
+						:class="{ messages: true, 'deny-move-transition': fetching }"
+						:items="messages"
+						v-model:itemsContainer="itemsContainerWrapped.v.value"
+						direction="up"
+						reversed
+					>
 						<XMessage :key="message.id" :message="message" :is-group="group != null"/>
 					</XList>
 				</template>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 6fb3f1c41..0a043f886 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -13,8 +13,8 @@
 	<FormSection>
 		<template #label>{{ $ts.signinHistory }}</template>
 		<MkPagination :pagination="pagination">
-			<template v-slot="{items}">
-				<div>
+			<template v-slot="{items, itemsContainer}">
+				<div ref="itemsContainer">
 					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
 						<header>
 							<i v-if="item.success" class="fas fa-check icon succ"></i>
diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue
index 98a1fc0f8..b3cc76b55 100644
--- a/packages/client/src/pages/user/follow-list.vue
+++ b/packages/client/src/pages/user/follow-list.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
-	<MkPagination v-slot="{items}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers">
-		<div class="users _isolated">
+	<MkPagination v-slot="{items, itemsContainer}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers">
+		<div class="users _isolated" ref="itemsContainer">
 			<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
 		</div>
 	</MkPagination>
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index 07dda4a29..286afe44d 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
-	<MkPagination v-slot="{items}" :pagination="pagination">
-		<div class="jrnovfpt">
+	<MkPagination v-slot="{items, itemsContainer}" :pagination="pagination">
+		<div class="jrnovfpt" ref="itemsContainer">
 			<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 		</div>
 	</MkPagination>
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index d6ecb90b9..51c2973ba 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -12,20 +12,28 @@ export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
 	}
 }
 
+export function getStickyTop(el: HTMLElement, container: HTMLElement | null = null, top: number = 0) {
+	if (!el.parentElement) return top;
+	const data = el.dataset.stickyContainerHeaderHeight;
+	const newTop = data ? Number(data) + top : top;
+	if (el === container) return newTop;
+	return getStickyTop(el.parentElement, container, newTop);
+}
+
 export function getScrollPosition(el: HTMLElement | null): number {
 	const container = getScrollContainer(el);
 	return container == null ? window.scrollY : container.scrollTop;
 }
 
-export function isTopVisible(el: HTMLElement): boolean {
-	const scrollTop = getScrollPosition(el);
-	const topPosition = el.offsetTop; // TODO: container内でのelの相対位置を取得できればより正確になる
+export function onScrollTop(el: HTMLElement, cb: Function) {
+	// とりあえず評価してみる
+	if (isTopVisible(el)) {
+		cb();
+		return null;
+	}
 
-	return scrollTop <= topPosition;
-}
-
-export function onScrollTop(el: HTMLElement, cb) {
 	const container = getScrollContainer(el) || window;
+
 	const onScroll = ev => {
 		if (!document.body.contains(el)) return;
 		if (isTopVisible(el)) {
@@ -33,13 +41,21 @@ export function onScrollTop(el: HTMLElement, cb) {
 			removeListener();
 		}
 	};
+
 	function removeListener() { container.removeEventListener('scroll', onScroll) }
 	container.addEventListener('scroll', onScroll, { passive: true });
 	return removeListener;
 }
 
-export function onScrollBottom(el: HTMLElement, cb) {
+export function onScrollBottom(el: HTMLElement, cb: Function) {
 	const container = getScrollContainer(el);
+
+	// とりあえず評価してみる
+	if (isBottom(el, 1, container)) {
+		cb();
+		return null;
+	}
+
 	const containerOrWindow = container || window;
 	const onScroll = ev => {
 		if (!document.body.contains(el)) return;
@@ -48,6 +64,7 @@ export function onScrollBottom(el: HTMLElement, cb) {
 			removeListener();
 		}
 	};
+
 	function removeListener() { containerOrWindow.removeEventListener('scroll', onScroll) }
 	containerOrWindow.addEventListener('scroll', onScroll, { passive: true });
 	return removeListener;
@@ -76,16 +93,32 @@ export function scrollToTop(el: HTMLElement, options: { behavior?: ScrollBehavio
  * @param el Content element
  * @param options Scroll options
  * @param container Scroll container element
+ * @param addSticky To add sticky-top or not
  */
-export function scrollToBottom(el: HTMLElement, options: ScrollToOptions = {}, container = getScrollContainer(el)) {
+export function scrollToBottom(el: HTMLElement, options: ScrollToOptions = {}, container = getScrollContainer(el), addSticky: boolean = true) {
+	const addStickyTop = addSticky ? getStickyTop(el, container) : 0;
 	if (container) {
-		container.scroll({ top: el.scrollHeight - container.clientHeight || 0, ...options });
+		container.scroll({ top: el.scrollHeight - container.clientHeight + addStickyTop || 0, ...options });
 	} else {
-		window.scroll({ top: el.scrollHeight - window.innerHeight || 0, ...options });
+		window.scroll({ top: el.scrollHeight - window.innerHeight + addStickyTop || 0, ...options });
 	}
 }
 
+export function isTopVisible(el: HTMLElement, asobi: number = 1): boolean {
+	const scrollTop = getScrollPosition(el);
+	return scrollTop <= asobi;
+}
+
 export function isBottom(el: HTMLElement, asobi = 1, container = getScrollContainer(el)) {
 	if (container) return el.scrollHeight <= container.clientHeight + Math.abs(container.scrollTop) + asobi;
 	return el.scrollHeight <= window.innerHeight + window.scrollY + asobi;
 }
+
+// https://ja.javascript.info/size-and-scroll-window#ref-932
+export function getBodyScrollHeight() {
+	return Math.max(
+		document.body.scrollHeight, document.documentElement.scrollHeight,
+		document.body.offsetHeight, document.documentElement.offsetHeight,
+		document.body.clientHeight, document.documentElement.clientHeight
+	);
+}
diff --git a/packages/client/src/types/date-separated-list.ts b/packages/client/src/types/date-separated-list.ts
new file mode 100644
index 000000000..a69bc39d5
--- /dev/null
+++ b/packages/client/src/types/date-separated-list.ts
@@ -0,0 +1,7 @@
+export type MisskeyEntity = {
+	id: string;
+	createdAt: string;
+	_shouldInsertAd_?:
+	boolean;
+	[x: string]: any;
+};
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index af77f9e97..f73caf7b0 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -44,7 +44,6 @@ import { defineComponent, defineAsyncComponent } from 'vue';
 import { host, instanceName } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
-import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import XHeader from './header.vue';
 import { ColdDeviceStorage } from '@/store';
@@ -55,7 +54,6 @@ const DESKTOP_THRESHOLD = 1100;
 export default defineComponent({
 	components: {
 		XHeader,
-		MkPagination,
 		MkButton,
 	},