no adjusting scroll
This commit is contained in:
parent
dd02648f8d
commit
054ea30955
|
@ -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"/>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
|
||||||
// なぜかscrollableElementOrHtmlがundefinedであるというエラーが出る
|
|
||||||
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' });
|
|
||||||
|
|
||||||
// なぜかscrollableElementOrHtmlがundefinedであるというエラーが出る
|
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue