profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix scroll bottom detect

Browse source
This commit is contained in:
tamaina 2022-02-02 14:54:02 +09:00
parent 9061d33405
commit b88fc1fb4e
2 changed files with 9 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/client/src/components/ui/pagination.vue
View file

@ -32,10 +32,10 @@
</template> </template>
<script lang="ts"> <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 misskey from 'misskey-js';
import * as os from '@/os'; 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 MkButton from '@/components/ui/button.vue';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
@ -150,16 +150,16 @@ const fetchMore = async (): Promise<void> => {
} }
const reverseConcat = _res => { const reverseConcat = _res => {
const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight(); const oldHeight = contentEl.scrollHeight;
const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY; const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
items.value = items.value.concat(_res); items.value = items.value.concat(_res);
return nextTick(() => { return nextTick(() => {
if (scrollableElement) { if (scrollableElement) {
scroll(scrollableElement, { top: oldScroll + (scrollableElement.scrollHeight - oldHeight), behavior: 'instant' }); scroll(scrollableElement, { top: oldScroll + (contentEl.scrollHeight - oldHeight), behavior: 'instant' });
} else { } else {
window.scrollY = oldScroll + (getBodyScrollHeight() - oldHeight); window.scrollY = oldScroll + (contentEl.scrollHeight - oldHeight);
} }
return nextTick(); return nextTick();

23
packages/client/src/scripts/scroll.ts
View file

@ -43,7 +43,7 @@ export function onScrollBottom(el: HTMLElement, cb) {
const containerOrWindow = container || window; const containerOrWindow = container || window;
const onScroll = ev => { const onScroll = ev => {
if (!document.body.contains(el)) return; if (!document.body.contains(el)) return;
if (isScrollBottom(container)) { if (isBottom(el, 1, container)) {
cb(); cb();
containerOrWindow.removeEventListener('scroll', onScroll); containerOrWindow.removeEventListener('scroll', onScroll);
} }
@ -82,22 +82,7 @@ export function scrollToBottom(el: HTMLElement, options: { behavior?: ScrollBeha
scroll(el, { top: el.scrollHeight, ...options }); // TODO: ちゃんと計算する scroll(el, { top: el.scrollHeight, ...options }); // TODO: ちゃんと計算する
} }
export function isBottom(el: HTMLElement, asobi = 1) { export function isBottom(el: HTMLElement, asobi = 1, container = getScrollContainer(el)) {
const container = getScrollContainer(el); if (container) return el.scrollHeight <= container.clientHeight + Math.abs(container.scrollTop) + asobi;
return isScrollBottom(container, 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
);
}
// 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;
} }