github-repos/blivechat
1
0
Fork 0
mirror of https://github.com/xfgryujk/blivechat.git synced 2024-12-25 20:30:28 +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 {
height: 32px;
overflow: hidden;
/* 为了支持滚动 */
/* overflow: hidden; */
overflow: visible;
white-space: nowrap;
padding: 0 24px 8px 24px;
}

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

@ -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)
},