From 15d20b8b52a85d0d5079772bfec17272243e4fb2 Mon Sep 17 00:00:00 2001
From: zilong <zilong.yang@gmail.com>
Date: Fri, 29 Oct 2021 01:46:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=BB=9A=E5=8A=A8=E5=B9=B3?=
 =?UTF-8?q?=E6=BB=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/common/SongDetail.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/views/common/SongDetail.vue b/src/views/common/SongDetail.vue
index 86dc5d3..8524159 100644
--- a/src/views/common/SongDetail.vue
+++ b/src/views/common/SongDetail.vue
@@ -66,12 +66,16 @@ const handleLyric = (ly) => {
 };
 
 watch(
-  ()=> currentLyricIdx.value,
-  (val)=>{
+  ()=> [currentLyricIdx.value,store.state.showSongDetail],
+  ([val, showSongDetail])=>{
+    console.log('changed lyric');
     if(val>0){
       // let elContent = document.getElementsByClassName('ly-content')[0]
-      let el = document.getElementsByClassName('ly-key-lines')[val]
-      lyList.value.scrollTop = el.offsetTop - 100
+      nextTick(()=>{
+        let el = document.getElementsByClassName('ly-key-lines')[val]
+        lyList.value.scrollTop = el.offsetTop - 100
+      })
+      
     }
   },
   {
@@ -299,6 +303,7 @@ export default {};
         margin-top: 15px;
         height: 290px;
         overflow-y: auto;
+        scroll-behavior: smooth;
 
         //  background-image : linear-gradient(180deg,hsla(255,0%,100%,0),rgba(255, 255, 255, 0.521));