Fix LazyEpisodeTable.init to respect non-zero scrollTop

This commit is contained in:
mikiher 2025-01-11 22:25:30 +02:00
parent c819afc53b
commit 5e2282ef76

View File

@ -80,7 +80,8 @@ export default {
episodeComponentRefs: {}, episodeComponentRefs: {},
windowHeight: 0, windowHeight: 0,
episodesTableOffsetTop: 0, episodesTableOffsetTop: 0,
episodeRowHeight: 176 episodeRowHeight: 176,
currScrollTop: 0
} }
}, },
watch: { watch: {
@ -484,9 +485,8 @@ export default {
} }
} }
}, },
scroll(evt) { handleScroll() {
if (!evt?.target?.scrollTop) return const scrollTop = this.currScrollTop
const scrollTop = Math.max(evt.target.scrollTop - this.episodesTableOffsetTop, 0)
let firstEpisodeIndex = Math.floor(scrollTop / this.episodeRowHeight) let firstEpisodeIndex = Math.floor(scrollTop / this.episodeRowHeight)
let lastEpisodeIndex = Math.ceil((scrollTop + this.windowHeight) / this.episodeRowHeight) let lastEpisodeIndex = Math.ceil((scrollTop + this.windowHeight) / this.episodeRowHeight)
lastEpisodeIndex = Math.min(this.totalEpisodes - 1, lastEpisodeIndex) lastEpisodeIndex = Math.min(this.totalEpisodes - 1, lastEpisodeIndex)
@ -501,6 +501,12 @@ export default {
}) })
this.mountEpisodes(firstEpisodeIndex, lastEpisodeIndex + 1) this.mountEpisodes(firstEpisodeIndex, lastEpisodeIndex + 1)
}, },
scroll(evt) {
if (!evt?.target?.scrollTop) return
const scrollTop = Math.max(evt.target.scrollTop - this.episodesTableOffsetTop, 0)
this.currScrollTop = scrollTop
this.handleScroll()
},
initListeners() { initListeners() {
const itemPageWrapper = document.getElementById('item-page-wrapper') const itemPageWrapper = document.getElementById('item-page-wrapper')
if (itemPageWrapper) { if (itemPageWrapper) {
@ -535,7 +541,12 @@ export default {
this.episodesPerPage = Math.ceil(this.windowHeight / this.episodeRowHeight) this.episodesPerPage = Math.ceil(this.windowHeight / this.episodeRowHeight)
this.$nextTick(() => { this.$nextTick(() => {
this.mountEpisodes(0, Math.min(this.episodesPerPage, this.totalEpisodes)) // Maybe update currScrollTop if items were removed
const itemPageWrapper = document.getElementById('item-page-wrapper')
const { scrollHeight, clientHeight } = itemPageWrapper
const maxScrollTop = scrollHeight - clientHeight
this.currScrollTop = Math.min(this.currScrollTop, maxScrollTop)
this.handleScroll()
}) })
} }
}, },