Fixed synced lyrics manual scrolling
This commit is contained in:
1 parent
30c7972647
commit
23f5709c68
1 file changed
+11
-1
@@ -98,6 +98,10 @@ let scrollingTimeout: any = null
|
|||||||
const onWheel = (event: WheelEvent) => {
|
const onWheel = (event: WheelEvent) => {
|
||||||
if (!containerRef.value || !outerRef.value) return
|
if (!containerRef.value || !outerRef.value) return
|
||||||
|
|
||||||
|
if (!isScrolling.value) {
|
||||||
|
manualOffset.value = transformY.value + offset
|
||||||
|
}
|
||||||
|
|
||||||
isScrolling.value = true
|
isScrolling.value = true
|
||||||
clearTimeout(scrollingTimeout)
|
clearTimeout(scrollingTimeout)
|
||||||
|
|
||||||
@@ -121,6 +125,12 @@ const onWheel = (event: WheelEvent) => {
|
|||||||
scrollingTimeout = setTimeout(() => (isScrolling.value = false), 3000)
|
scrollingTimeout = setTimeout(() => (isScrolling.value = false), 3000)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onLyricClick = (time: number) => {
|
||||||
|
clearTimeout(scrollingTimeout)
|
||||||
|
isScrolling.value = false
|
||||||
|
secondsPlayed.value = time
|
||||||
|
}
|
||||||
|
|
||||||
const finalTransform = computed(() => {
|
const finalTransform = computed(() => {
|
||||||
if (isScrolling.value) return manualOffset.value
|
if (isScrolling.value) return manualOffset.value
|
||||||
|
|
||||||
@@ -152,7 +162,7 @@ const finalTransform = computed(() => {
|
|||||||
:key="lyric.time"
|
:key="lyric.time"
|
||||||
:class="{ active: i == scrollActiveIndex }"
|
:class="{ active: i == scrollActiveIndex }"
|
||||||
ref="lyrics"
|
ref="lyrics"
|
||||||
@click="() => (secondsPlayed = lyric.time)"
|
@click="onLyricClick(lyric.time)"
|
||||||
>
|
>
|
||||||
{{ lyric.text }}
|
{{ lyric.text }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
Reference in new issue
Block a user