Vue如何設(shè)置滾動條自動保持到最底端
更新時間：2024年08月13日 11:41:20 作者：Lipn
在開發(fā)中我們常常會遇到需要讓滾動條保持到最底端的需求,比如在開發(fā)一個聊天框時,請求接口拿到消息列表數(shù)據(jù),展示到前端頁面時,需要讓滾動條自動滾到最底端,以此來展示最后的聊天記錄,這篇文章主要介紹了Vue如何設(shè)置滾動條自動保持到最底端,需要的朋友可以參考下
Vue設(shè)置滾動條自動保持到最底端
需求描述：在開發(fā)中我們常常會遇到需要讓滾動條保持到最底端的需求，比如在開發(fā)一個聊天框時，請求接口拿到消息列表數(shù)據(jù)，展示到前端頁面時，需要讓滾動條自動滾到最底端，以此來展示最后的聊天記錄。同時，當(dāng)發(fā)送一條新的消息時，也需要滾動條自動滾動到最底端，默認(rèn)顯示到最后一條數(shù)據(jù)，而不是在發(fā)送完一條新消息之后還需要手動滑動滾動條到最底端。
主要實現(xiàn)原理：
其實這個需求就是需要設(shè)置該元素（產(chǎn)生滾動條的元素）的scrollTop 等于scrollHeight
主要代碼：
<template> <div ref="box" class="box"></div> </template>
<script>
// 滾動到底部
scrollToBottom() {
// 這里是Vue2的寫法
const box = this.$refs.box as HTMLElement
this.$nextTick(() => {
box.scrollTop = box.scrollHeight
})
}
</script><style>
.box {
overflow: auto;
height: 446px; /*重要！一定要有高度才會生成滾動條*/
}
</style>注意事項：
box容器必須設(shè)置具體的高度height，否則不會產(chǎn)生滾動條，（如果頁面上看有滾動條，那可能是父元素產(chǎn)生的滾動條），如果沒有給box容器設(shè)置高度的話，這個scrollToBottom方法就不會生效！
補(bǔ)充：Vue項目中讓滾動條始終處于最底部
Vue項目中讓滾動條始終處于最底部
效果圖：
核心代碼：
// 讓滾動條始終在最底部
this.$nextTick(() => {
this.$refs.messageContent.scrollTop = this.$refs.messageContent.scrollHeight
})到此這篇關(guān)于Vue如何設(shè)置滾動條自動保持到最底端的文章就介紹到這了,更多相關(guān)Vue滾動條自動保持到最底端內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Store倉庫里，state就是用來存放數(shù)據(jù)。如果很多組件都使用這個過濾后的數(shù)據(jù)，我們是否可以把這個數(shù)據(jù)抽提出來共享？這就是getters存在的意義。我們可以認(rèn)為，getters是store的計算屬性。本文將具體介紹一下getters的使用教程，需要的可以參考一下2022-01-01
Vue3+echarts5踩坑以及resize方法報錯的解決
這篇文章主要介紹了Vue3+echarts5踩坑以及resize方法報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue離開當(dāng)前頁面觸發(fā)的函數(shù)代碼
這篇文章主要介紹了vue離開當(dāng)前頁面觸發(fā)的函數(shù)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue+echarts實現(xiàn)進(jìn)度條式柱狀圖
這篇文章主要為大家詳細(xì)介紹了vue+echarts實現(xiàn)進(jìn)度條式柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue中封裝組件的相關(guān)知識,文中的示例代碼講解詳細(xì),對我們深入了解vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
給大家講解一下vue組件發(fā)布到npm簡單方法和步驟過程，需要的朋友一起學(xué)習(xí)參考一下。2017-11-11
這篇文章主要為大家介紹了vue3結(jié)合ts項目中使用mockjs示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了vue中實現(xiàn)可編輯table及其中加入下拉選項，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue-CLI 3 scp2自動部署項目至服務(wù)器的方法
這篇文章主要介紹了Vue-CLI 3 scp2自動部署項目至服務(wù)器的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue.js動態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了vue.js動態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05