最近在做一個直播的頁面，其中有一個功能是實現評論實時滾動，具體效果如下圖
大致思路
- 獲取DOM,Vue中建議使用ref
- 元素的scrollTop =元素的.scrollHeight;
Element.scrollTop補充
Element.scrollTop屬性可以獲取或設置一個元素的內容垂直滾動的像素數。
一個元素的 scrollTop 值是這個元素的內容頂部（卷起來的）到它的視口可見內容（的頂部）的距離的度量。當一個元素的內容沒有產生垂直方向的滾動條，那么它的 scrollTop 值為0。
Element.scrollHeight補充
Element.scrollHeight 只讀屬性，是一個元素內容高度的度量，包括由于溢出導致的視圖中不可見內容。
scrollHeight的值等于該元素在不使用滾動條的情況下為了適應視口中所用內容所需的最小高度。 沒有垂直滾動條的情況下，scrollHeight值與元素視圖填充所有內容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after這樣的偽元素。
更詳細的介紹可以參考MDN上面的介紹
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
具體代碼
html
<div class="tabs danmuBox" ref="scrolldIV">
<div v-for="item in danmuList" :key="item.id" class="item">
<div class="left">
A
</div>
<div class="right">
<div class="author">
{{ item.author }}
</div>
<div class="text" >{{ item.text }}</div>
</div>
</div>
</div>
js
let div = this.$refs.scrolldIV
this.$nextTick(() => {
div.$el.scrollTop = div.$el.scrollHeight;
})
data
danmuList: [
{
id: 1,
text: "AAAAAA",
author: "wb_zhhh",
color:'f5f5f5'
},
{
id: 2,
text: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaa",
author: "wb_zhhhAAAAAAAAAAAAAAAAAAAAAAAAa",
color:'999999'
},
{
id: 3,
text: "AAAAAA",
author: "wb_zhhh",
color:'666666'
},
],
使用案例
333.gif
代碼地址
https://github.com/menglin1997/hls-video
大家好,我是[張小翼],歡迎關注我的公眾號(前端zml)，一起學習交流
前端zml.png
