fix(ScrollingLyrics): adjust scroll behavior and limit range for user interactions

This commit is contained in:
Astrian Zheng 2025-05-26 18:52:20 +10:00
parent 145a2d2dbb
commit 95d00616d0
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA

View File

@ -50,7 +50,7 @@
</div> </div>
<!-- 底部填充 --> <!-- 底部填充 -->
<div class="h-1/2 pointer-events-none"></div> <div class="h-96 pointer-events-none"></div>
</div> </div>
<!-- 歌词控制面板 --> <!-- 歌词控制面板 -->
@ -357,24 +357,24 @@ function highlightCurrentLine(lineIndex: number) {
function handleWheel(event: WheelEvent) { function handleWheel(event: WheelEvent) {
event.preventDefault() event.preventDefault()
if (!lyricsWrapper.value) return if (!lyricsWrapper.value || !lyricsContainer.value) return
//
userScrolling.value = true userScrolling.value = true
autoScroll.value = false autoScroll.value = false
//
if (scrollTween) { if (scrollTween) {
scrollTween.kill() scrollTween.kill()
} }
//
const currentY = gsap.getProperty(lyricsWrapper.value, "y") as number const currentY = gsap.getProperty(lyricsWrapper.value, "y") as number
const newY = currentY - event.deltaY * 0.5 const newY = currentY - event.deltaY * 0.5
// //
const maxScroll = parsedLyrics.value.length * 80 const wrapperHeight = lyricsWrapper.value.scrollHeight
const limitedY = Math.max(-maxScroll, Math.min(maxScroll, newY)) const containerHeight = lyricsContainer.value.clientHeight
const minY = containerHeight - wrapperHeight //
const maxY = 0 //
const limitedY = Math.max(minY, Math.min(maxY, newY))
gsap.to(lyricsWrapper.value, { gsap.to(lyricsWrapper.value, {
y: limitedY, y: limitedY,
@ -382,17 +382,14 @@ function handleWheel(event: WheelEvent) {
ease: "power2.out" ease: "power2.out"
}) })
//
if (userScrollTimeout) { if (userScrollTimeout) {
clearTimeout(userScrollTimeout) clearTimeout(userScrollTimeout)
} }
// 3
userScrollTimeout = setTimeout(() => { userScrollTimeout = setTimeout(() => {
userScrolling.value = false userScrolling.value = false
autoScroll.value = true autoScroll.value = true
//
if (currentLineIndex.value >= 0) { if (currentLineIndex.value >= 0) {
scrollToLine(currentLineIndex.value, true) scrollToLine(currentLineIndex.value, true)
} }