no adjusting scroll

This commit is contained in:
tamaina 2023-07-18 04:27:20 +00:00
parent dd02648f8d
commit 054ea30955
3 changed files with 9 additions and 63 deletions

View file

@ -7,7 +7,7 @@
</div> </div>
</template> </template>
<template #default="{ items: notes, denyMoveTransition }"> <template #default="{ items: notes }">
<div :class="[$style.root, { [$style.noGap]: noGap }]"> <div :class="[$style.root, { [$style.noGap]: noGap }]">
<MkDateSeparatedList <MkDateSeparatedList
ref="notes" ref="notes"
@ -17,7 +17,6 @@
:reversed="pagination.reversed" :reversed="pagination.reversed"
:noGap="noGap" :noGap="noGap"
:ad="true" :ad="true"
:denyMoveTransition="denyMoveTransition"
:class="$style.notes" :class="$style.notes"
> >
<MkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note"/> <MkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note"/>

View file

@ -7,8 +7,8 @@
</div> </div>
</template> </template>
<template #default="{ items: notifications, denyMoveTransition }"> <template #default="{ items: notifications }">
<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true" :denyMoveTransition="denyMoveTransition"> <MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="`showNotificationAsNote:${notification.id}`" :note="notification.note"/> <MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="`showNotificationAsNote:${notification.id}`" :note="notification.note"/>
<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel notification"/> <XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel notification"/>
</MkDateSeparatedList> </MkDateSeparatedList>

View file

@ -26,7 +26,7 @@
</MkButton> </MkButton>
<MkLoading v-else class="loading"/> <MkLoading v-else class="loading"/>
</div> </div>
<slot :items="Array.from(items.values())" :fetching="fetching || moreFetching" :denyMoveTransition="denyMoveTransition"></slot> <slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot>
<div v-show="!pagination.reversed && more" key="_more_" class="_margin"> <div v-show="!pagination.reversed && more" key="_more_" class="_margin">
<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary rounded @click="fetchMore"> <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary rounded @click="fetchMore">
{{ i18n.ts.loadMore }} {{ i18n.ts.loadMore }}
@ -147,7 +147,6 @@ const preventAppearFetchMore = ref(false);
const preventAppearFetchMoreTimer = ref<number | null>(null); const preventAppearFetchMoreTimer = ref<number | null>(null);
const empty = computed(() => items.value.size === 0); const empty = computed(() => items.value.size === 0);
const error = ref(false); const error = ref(false);
const denyMoveTransition = ref(false);
const { const {
enableInfiniteScroll, enableInfiniteScroll,
} = defaultStore.reactiveState; } = defaultStore.reactiveState;
@ -241,53 +240,6 @@ watch([$$(weakBacked), $$(contentEl)], () => {
})(); })();
}); });
function preventDefault(ev: Event) {
ev.preventDefault();
}
/**
* アイテムを上に追加した場合に追加分だけスクロールを下にずらす
* ChromeやFirefoxはこれをいい感じにやってくれるがSafariはやってくれないため自分で実装する必要がある
* @param fn DOM操作(unshiftItemsなどで)
*/
async function adjustScroll(fn: () => void): Promise<void> {
denyMoveTransition.value = true;
await nextTick();
const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight();
const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
//
try {
// scrollableElementOrHtmlundefined
scrollableElementOrHtml.addEventListener('wheel', preventDefault, { passive: false });
scrollableElementOrHtml.addEventListener('touchmove', preventDefault, { passive: false });
// try
scroll(scrollableElement, { top: oldScroll, behavior: 'instant' });
} catch (err) {
console.error(err, { scrollableElementOrHtml });
}
fn();
return await nextTick(() => {
try {
// scrollBy
const top = oldScroll + ((scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight()) - oldHeight);
scroll(scrollableElement, { top, behavior: 'instant' });
// scrollableElementOrHtmlundefined
scrollableElementOrHtml.removeEventListener('wheel', preventDefault);
scrollableElementOrHtml.removeEventListener('touchmove', preventDefault);
} catch (err) {
console.error(err, { scrollableElementOrHtml });
}
denyMoveTransition.value = false;
return nextTick();
});
}
//#endregion
/** /**
* 初期化 * 初期化
* scrollAfterInitなどの後処理もあるのでreload関数を使うべき * scrollAfterInitなどの後処理もあるのでreload関数を使うべき
@ -388,7 +340,7 @@ const fetchMore = async (): Promise<void> => {
if (i === 10) item._shouldInsertAd_ = true; if (i === 10) item._shouldInsertAd_ = true;
} }
const reverseConcat = (_res) => adjustScroll(() => concatMapWithArray(items.value, _res)); const reverseConcat = (_res) => concatMapWithArray(items.value, _res);
if (res.length === 0) { if (res.length === 0) {
if (props.pagination.reversed) { if (props.pagination.reversed) {
@ -568,20 +520,15 @@ async function executeQueue() {
queue.value = new Map(queueArr.slice(props.pagination.limit)); queue.value = new Map(queueArr.slice(props.pagination.limit));
isPausingUpdate.value = true; isPausingUpdate.value = true;
try { try {
await adjustScroll(() => {
unshiftItems( unshiftItems(
queueArr.slice(0, props.pagination.limit).map(v => v[1]).reverse(), queueArr.slice(0, props.pagination.limit).map(v => v[1]).reverse(),
Infinity, Infinity,
); );
});
// adjustScroll
denyMoveTransition.value = true;
items.value = new Map([...items.value].slice(0, displayLimit.value)); items.value = new Map([...items.value].slice(0, displayLimit.value));
await nextTick(); await nextTick();
} finally { } finally {
isPausingUpdate.value = false; isPausingUpdate.value = false;
denyMoveTransition.value = false;
} }
} }