From b88fc1fb4eee446296c290b9ebea8f0f09f7a0ef Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 2 Feb 2022 14:54:02 +0900
Subject: [PATCH] Fix scroll bottom detect

---
 .../client/src/components/ui/pagination.vue   | 10 ++++----
 packages/client/src/scripts/scroll.ts         | 23 ++++---------------
 2 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index b3b1f6f13..bb7c8899f 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -32,10 +32,10 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, isRef, markRaw, nextTick, onActivated, onDeactivated, onMounted, Ref, ref, watch } from 'vue';
+import { computed, ComputedRef, isRef, nextTick, onActivated, onDeactivated, onMounted, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
-import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
+import { onScrollTop, isTopVisible, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
 import MkButton from '@/components/ui/button.vue';
 import { defaultStore } from '@/store';
 
@@ -150,16 +150,16 @@ const fetchMore = async (): Promise<void> => {
 		}
 
 		const reverseConcat = _res => {
-			const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight();
+			const oldHeight = contentEl.scrollHeight;
 			const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
 
 			items.value = items.value.concat(_res);
 
 			return nextTick(() => {
 				if (scrollableElement) {
-					scroll(scrollableElement, { top: oldScroll + (scrollableElement.scrollHeight - oldHeight), behavior: 'instant' });
+					scroll(scrollableElement, { top: oldScroll + (contentEl.scrollHeight - oldHeight), behavior: 'instant' });
 				} else {
-					window.scrollY = oldScroll + (getBodyScrollHeight() - oldHeight);
+					window.scrollY = oldScroll + (contentEl.scrollHeight - oldHeight);
 				}
 
 				return nextTick();
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 6d49b1376..2176b862d 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -43,7 +43,7 @@ export function onScrollBottom(el: HTMLElement, cb) {
 	const containerOrWindow = container || window;
 	const onScroll = ev => {
 		if (!document.body.contains(el)) return;
-		if (isScrollBottom(container)) {
+		if (isBottom(el, 1, container)) {
 			cb();
 			containerOrWindow.removeEventListener('scroll', onScroll);
 		}
@@ -82,22 +82,7 @@ export function scrollToBottom(el: HTMLElement, options: { behavior?: ScrollBeha
 	scroll(el, { top: el.scrollHeight, ...options }); // TODO: ちゃんと計算する
 }
 
-export function isBottom(el: HTMLElement, asobi = 1) {
-	const container = getScrollContainer(el);
-	return isScrollBottom(container, 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
-	);
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
-export function isScrollBottom(container?: HTMLElement | null, asobi = 1) {
-	if (container) return container.scrollHeight - Math.abs(container.scrollTop) <= container.clientHeight + asobi;
-	return getBodyScrollHeight() - window.scrollY <= window.innerHeight + 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;
 }