Fix post scroller sync and top time

This commit is contained in:
Tim
2025-08-03 00:33:34 +08:00
parent ac08fc96ce
commit 454c7fb8f3

View File

@@ -89,7 +89,7 @@
<div class="post-page-scroller-container"> <div class="post-page-scroller-container">
<div class="scroller"> <div class="scroller">
<div v-if="isWaitingFetchingPost" class="scroller-time">loading...</div> <div v-if="isWaitingFetchingPost" class="scroller-time">loading...</div>
<div v-else class="scroller-time">{{ postTime }}</div> <div v-else class="scroller-time">{{ scrollerTopTime }}</div>
<div class="scroller-middle"> <div class="scroller-middle">
<input type="range" class="scroller-range" :max="totalPosts" :min="1" v-model.number="currentIndex" <input type="range" class="scroller-range" :max="totalPosts" :min="1" v-model.number="currentIndex"
@input="onSliderInput" /> @input="onSliderInput" />
@@ -323,6 +323,12 @@ export default {
const lastReplyTime = computed(() => const lastReplyTime = computed(() =>
comments.value.length ? comments.value[comments.value.length - 1].time : postTime.value comments.value.length ? comments.value[comments.value.length - 1].time : postTime.value
) )
const firstReplyTime = computed(() =>
comments.value.length ? comments.value[0].time : postTime.value
)
const scrollerTopTime = computed(() =>
commentSort.value === 'OLDEST' ? postTime.value : firstReplyTime.value
)
watch( watch(
() => comments.value.length, () => comments.value.length,
@@ -351,8 +357,10 @@ export default {
} }
} }
const onSliderInput = () => { const onSliderInput = (e) => {
const target = postItems.value[currentIndex.value - 1] const index = Number(e.target.value)
currentIndex.value = index
const target = postItems.value[index - 1]
if (target && mainContainer.value) { if (target && mainContainer.value) {
const top = getTopRelativeTo(target, mainContainer.value) const top = getTopRelativeTo(target, mainContainer.value)
mainContainer.value.scrollTo({ top, behavior: 'instant' }) mainContainer.value.scrollTo({ top, behavior: 'instant' })
@@ -584,6 +592,7 @@ export default {
tags, tags,
comments, comments,
postTime, postTime,
scrollerTopTime,
lastReplyTime, lastReplyTime,
postItems, postItems,
mainContainer, mainContainer,