github-repos/blivechat
1
0
Fork 0
mirror of https://github.com/xfgryujk/blivechat.git synced 2024-12-26 04:41:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

SC固定栏支持滚动

Browse Source
This commit is contained in:
John Smith 2024-11-24 20:18:56 +08:00
parent 1244210bfe
commit aae8bd2f15
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css
View File

@ -22,7 +22,9 @@ yt-live-chat-ticker-renderer {
#items.yt-live-chat-ticker-renderer { #items.yt-live-chat-ticker-renderer {
height: 32px; height: 32px;
overflow: hidden; /* 为了支持滚动 */
/* overflow: hidden; */
overflow: visible;
white-space: nowrap; white-space: nowrap;
padding: 0 24px 8px 24px; padding: 0 24px 8px 24px;
} }

12
frontend/src/components/ChatRenderer/Ticker.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<yt-live-chat-ticker-renderer :hidden="showMessages.length === 0"> <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" <transition-group tag="div" :css="false" @enter="onTickerItemEnter" @leave="onTickerItemLeave"
id="items" class="style-scope yt-live-chat-ticker-renderer" id="items" class="style-scope yt-live-chat-ticker-renderer"
> >
@ -22,7 +22,7 @@
</div> </div>
</yt-live-chat-ticker-paid-message-item-renderer> </yt-live-chat-ticker-paid-message-item-renderer>
</transition-group> </transition-group>
</div> </el-scrollbar>
<template v-if="pinnedMessage"> <template v-if="pinnedMessage">
<membership-item :key="pinnedMessage.id" v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER" <membership-item :key="pinnedMessage.id" v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER"
class="style-scope yt-live-chat-ticker-renderer" class="style-scope yt-live-chat-ticker-renderer"
@ -110,7 +110,11 @@ export default {
el.style.width = 0 el.style.width = 0
await this.$nextTick() await this.$nextTick()
el.style.width = `${width}px` el.style.width = `${width}px`
window.setTimeout(done, 200) window.setTimeout(() => {
done()
// 因为el-scrollbar监听不到事件，这里必须手动调update
this.$refs.scrollbar.update()
}, 200)
}, },
onTickerItemLeave(el, done) { onTickerItemLeave(el, done) {
el.classList.add('sliding-down') el.classList.add('sliding-down')
@ -122,6 +126,8 @@ export default {
el.classList.remove('collapsing') el.classList.remove('collapsing')
el.style.width = 'auto' el.style.width = 'auto'
done() done()
// 因为el-scrollbar监听不到事件，这里必须手动调update
this.$refs.scrollbar.update()
}, 200) }, 200)
}, 200) }, 200)
}, },