monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

✌️

Browse source
This commit is contained in:
tamaina 2023-07-13 05:27:53 +00:00
parent 877a7a81bb
commit fae912a754
1 changed files with 18 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
packages/frontend/src/components/MkPagination.vue
View file

@ -161,6 +161,12 @@ let timerForSetPause: number | null = null;
const BACKGROUND_PAUSE_WAIT_SEC = 10; const BACKGROUND_PAUSE_WAIT_SEC = 10;
//#region scrolling //#region scrolling
const checkFn = props.pagination.reversed ? isBottomVisible : isTopVisible;
const checkTop = () => {
if (!contentEl) return;
if (!document.body.contains(contentEl)) return;
return checkFn(contentEl, TOLERANCE, scrollableElement);
};
/** /**
* IntersectionObserverで大まかに検出 * IntersectionObserverで大まかに検出
* https://qiita.com/mkataigi/items/0154aefd2223ce23398e * https://qiita.com/mkataigi/items/0154aefd2223ce23398e
@ -172,15 +178,14 @@ watch([() => props.pagination.reversed, $$(scrollableElement)], () => {
scrollObserver = new IntersectionObserver(entries => { scrollObserver = new IntersectionObserver(entries => {
weakBacked = entries[0].isIntersecting; weakBacked = entries[0].isIntersecting;
if (weakBacked) backed = true;
}, { }, {
root: scrollableElementOrHtml, root: scrollableElement,
rootMargin: props.pagination.reversed ? '-100% 0px 100% 0px' : '100% 0px -100% 0px', rootMargin: props.pagination.reversed ? '-100% 0px 100% 0px' : '100% 0px -100% 0px',
threshold: 0.1, // 10%ぐらいになったらqueueを読む threshold: 0.1, // 10%ぐらいになったらqueueを読む
}); });
}, { immediate: true }); }, { immediate: true });
watch($$(rootEl), () => { watch([$$(rootEl), $$(scrollObserver)], () => {
scrollObserver?.disconnect(); scrollObserver?.disconnect();
nextTick(() => { nextTick(() => {
if (rootEl) scrollObserver?.observe(rootEl); if (rootEl) scrollObserver?.observe(rootEl);
@ -197,33 +202,26 @@ watch($$(backed), () => {
}); });
watch([$$(weakBacked), $$(contentEl)], () => { watch([$$(weakBacked), $$(contentEl)], () => {
if (weakBacked || !contentEl) {
if (scrollRemove) scrollRemove(); if (scrollRemove) scrollRemove();
scrollRemove = null; scrollRemove = null;
if (weakBacked || !contentEl) {
if (weakBacked) backed = true;
return; return;
} }
scrollRemove = (() => { scrollRemove = (() => {
const checkFn = props.pagination.reversed ? isBottomVisible : isTopVisible; const checkBacked = () => {
const el = contentEl; backed = !checkTop();
const tolerance = TOLERANCE;
const onScroll = () => {
if (!document.body.contains(el)) return;
if (checkFn(el, tolerance)) {
backed = false;
} else {
backed = true;
}
}; };
// とりあえず評価してみる // とりあえず評価してみる
onScroll(); checkBacked();
const container = scrollableElementOrHtml; const container = scrollableElementOrHtml;
function removeListener() { container.removeEventListener('scroll', onScroll); } function removeListener() { container.removeEventListener('scroll', onScroll); }
container.addEventListener('scroll', onScroll, { passive: true }); container.addEventListener('scroll', checkBacked, { passive: true });
return removeListener; return removeListener;
})(); })();
}); });
@ -240,10 +238,6 @@ function adjustScroll(fn: () => void): Promise<void> {
return nextTick(() => { return nextTick(() => {
const top = oldScroll + ((scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight()) - oldHeight); const top = oldScroll + ((scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight()) - oldHeight);
scroll(scrollableElement, { top, behavior: 'instant' }); scroll(scrollableElement, { top, behavior: 'instant' });
if (top > TOLERANCE) {
weakBacked = true;
backed = true;
}
return nextTick(); return nextTick();
}); });
} }
@ -295,12 +289,11 @@ async function init(): Promise<void> {
function scrollAfterInit() { function scrollAfterInit() {
if (props.pagination.reversed) { if (props.pagination.reversed) {
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(async () => {
if (contentEl) { if (contentEl) {
scrollToBottom(contentEl); scrollToBottom(contentEl);
// scrollToしてもbacked周りがうまく動かないので手動で戻す必要がある // scrollToしてもbacked周りがうまく動かないので手動で戻す必要がある
weakBacked = false; weakBacked = false;
backed = false;
} }
}, 200); }, 200);
@ -316,7 +309,6 @@ function scrollAfterInit() {
scrollToTop(scrollableElement); scrollToTop(scrollableElement);
// scrollToしてもbacked周りがうまく動かないので手動で戻す必要がある // scrollToしてもbacked周りがうまく動かないので手動で戻す必要がある
weakBacked = false; weakBacked = false;
backed = false;
moreFetching.value = false; moreFetching.value = false;
}, 200); }, 200);
@ -523,6 +515,7 @@ async function executeQueue() {
Infinity, Infinity,
); );
}); });
weakBacked = !checkTop();
items.value = new Map([...items.value].slice(0, displayLimit.value)); items.value = new Map([...items.value].slice(0, displayLimit.value));
await nextTick(); await nextTick();
isPausingUpdate = false; isPausingUpdate = false;