From aae8bd2f150298c9047f99365f4bc0ec4541b7fc Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Sun, 24 Nov 2024 20:18:56 +0800
Subject: [PATCH] =?UTF-8?q?SC=E5=9B=BA=E5=AE=9A=E6=A0=8F=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/youtube/yt-live-chat-ticker-renderer.css     |  4 +++-
 frontend/src/components/ChatRenderer/Ticker.vue      | 12 +++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css
index 598a207..f3b3cef 100644
--- a/frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css
+++ b/frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css
@@ -22,7 +22,9 @@ yt-live-chat-ticker-renderer {
 
 #items.yt-live-chat-ticker-renderer {
   height: 32px;
-  overflow: hidden;
+  /* 为了支持滚动 */
+  /* overflow: hidden; */
+  overflow: visible;
   white-space: nowrap;
   padding: 0 24px 8px 24px;
 }
diff --git a/frontend/src/components/ChatRenderer/Ticker.vue b/frontend/src/components/ChatRenderer/Ticker.vue
index 3d7d500..5fb743b 100644
--- a/frontend/src/components/ChatRenderer/Ticker.vue
+++ b/frontend/src/components/ChatRenderer/Ticker.vue
@@ -1,6 +1,6 @@
 <template>
   <yt-live-chat-ticker-renderer :hidden="showMessages.length === 0">
-    <div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-renderer">
+    <el-scrollbar ref="scrollbar" id="container" dir="ltr" class="style-scope yt-live-chat-ticker-renderer">
       <transition-group tag="div" :css="false" @enter="onTickerItemEnter" @leave="onTickerItemLeave"
         id="items" class="style-scope yt-live-chat-ticker-renderer"
       >
@@ -22,7 +22,7 @@
           </div>
         </yt-live-chat-ticker-paid-message-item-renderer>
       </transition-group>
-    </div>
+    </el-scrollbar>
     <template v-if="pinnedMessage">
       <membership-item :key="pinnedMessage.id" v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER"
         class="style-scope yt-live-chat-ticker-renderer"
@@ -110,7 +110,11 @@ export default {
       el.style.width = 0
       await this.$nextTick()
       el.style.width = `${width}px`
-      window.setTimeout(done, 200)
+      window.setTimeout(() => {
+        done()
+        // 因为el-scrollbar监听不到事件，这里必须手动调update
+        this.$refs.scrollbar.update()
+      }, 200)
     },
     onTickerItemLeave(el, done) {
       el.classList.add('sliding-down')
@@ -122,6 +126,8 @@ export default {
           el.classList.remove('collapsing')
           el.style.width = 'auto'
           done()
+          // 因为el-scrollbar监听不到事件，这里必须手动调update
+          this.$refs.scrollbar.update()
         }, 200)
       }, 200)
     },