fix(ScrollingLyrics): adjust scroll behavior and limit range for user interactions
This commit is contained in:
parent
145a2d2dbb
commit
95d00616d0
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
|
||||
<!-- 底部填充 -->
|
||||
<div class="h-1/2 pointer-events-none"></div>
|
||||
<div class="h-96 pointer-events-none"></div>
|
||||
</div>
|
||||
|
||||
<!-- 歌词控制面板 -->
|
||||
|
@ -357,42 +357,39 @@ function highlightCurrentLine(lineIndex: number) {
|
|||
function handleWheel(event: WheelEvent) {
|
||||
event.preventDefault()
|
||||
|
||||
if (!lyricsWrapper.value) return
|
||||
|
||||
// 用户手动滚动
|
||||
if (!lyricsWrapper.value || !lyricsContainer.value) return
|
||||
|
||||
userScrolling.value = true
|
||||
autoScroll.value = false
|
||||
|
||||
// 停止当前滚动动画
|
||||
|
||||
if (scrollTween) {
|
||||
scrollTween.kill()
|
||||
}
|
||||
|
||||
// 获取当前位置并应用滚动
|
||||
|
||||
const currentY = gsap.getProperty(lyricsWrapper.value, "y") as number
|
||||
const newY = currentY - event.deltaY * 0.5
|
||||
|
||||
// 限制滚动范围
|
||||
const maxScroll = parsedLyrics.value.length * 80
|
||||
const limitedY = Math.max(-maxScroll, Math.min(maxScroll, newY))
|
||||
|
||||
|
||||
// 修正滚动范围计算
|
||||
const wrapperHeight = lyricsWrapper.value.scrollHeight
|
||||
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, {
|
||||
y: limitedY,
|
||||
duration: 0.1,
|
||||
ease: "power2.out"
|
||||
})
|
||||
|
||||
// 清除之前的超时
|
||||
|
||||
if (userScrollTimeout) {
|
||||
clearTimeout(userScrollTimeout)
|
||||
}
|
||||
|
||||
// 3秒后重新启用自动滚动
|
||||
|
||||
userScrollTimeout = setTimeout(() => {
|
||||
userScrolling.value = false
|
||||
autoScroll.value = true
|
||||
|
||||
// 重新滚动到当前行
|
||||
|
||||
if (currentLineIndex.value >= 0) {
|
||||
scrollToLine(currentLineIndex.value, true)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user