Vue如何設置滾動條自動保持到最底端
更新時間：2024年08月13日 11:41:20 作者：Lipn
在開發(fā)中我們常常會遇到需要讓滾動條保持到最底端的需求,比如在開發(fā)一個聊天框時,請求接口拿到消息列表數(shù)據(jù),展示到前端頁面時,需要讓滾動條自動滾到最底端,以此來展示最后的聊天記錄,這篇文章主要介紹了Vue如何設置滾動條自動保持到最底端,需要的朋友可以參考下
Vue設置滾動條自動保持到最底端
需求描述：在開發(fā)中我們常常會遇到需要讓滾動條保持到最底端的需求，比如在開發(fā)一個聊天框時，請求接口拿到消息列表數(shù)據(jù)，展示到前端頁面時，需要讓滾動條自動滾到最底端，以此來展示最后的聊天記錄。同時，當發(fā)送一條新的消息時，也需要滾動條自動滾動到最底端，默認顯示到最后一條數(shù)據(jù)，而不是在發(fā)送完一條新消息之后還需要手動滑動滾動條到最底端。
主要實現(xiàn)原理：
其實這個需求就是需要設置該元素（產(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容器必須設置具體的高度height，否則不會產(chǎn)生滾動條，（如果頁面上看有滾動條，那可能是父元素產(chǎn)生的滾動條），如果沒有給box容器設置高度的話，這個scrollToBottom方法就不會生效！
補充：Vue項目中讓滾動條始終處于最底部
Vue項目中讓滾動條始終處于最底部
效果圖：
核心代碼：
// 讓滾動條始終在最底部
this.$nextTick(() => {
this.$refs.messageContent.scrollTop = this.$refs.messageContent.scrollHeight
})到此這篇關于Vue如何設置滾動條自動保持到最底端的文章就介紹到這了,更多相關Vue滾動條自動保持到最底端內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文給大家分享我使用vscode開發(fā)的一些配置。其中包括uniapp組件語法提示，uniapp代碼提示，代碼自動格式化問題，對vscode 開發(fā)uniapp的相關知識感興趣的朋友一起看看吧2021-08-08
在vue中，我們?nèi)绾瓮ㄟ^請求接口來訪問后端的數(shù)據(jù)呢?在這里簡單總結了一個小示例，對vue請求后端數(shù)據(jù)實例代碼感興趣的朋友一起看看吧2022-09-09
這篇文章主要介紹了VUE插件vue-treeselect的使用及說明，具有很好的參考價值，希望對大家有所幫助。2023-07-07
這篇文章是一篇Vue.js的教程，目標在于用一種常見的業(yè)務場景——分頁/無限加載，以及編寫過程中自己的錯誤寫法，分享給大家，幫助讀者更好的理解Vue.js中的一些設計思想。2016-10-10
這篇文章主要為大家詳細介紹了vue的axios和mock.js，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue項目登錄模塊滑塊拼圖驗證功能實現(xiàn)代碼(純前端)
滑塊驗證作為一種反機器人的工具,也會不斷發(fā)展和演進,以適應不斷變化的威脅,這篇文章主要給大家介紹了vue項目登錄模塊滑塊拼圖驗證功能實現(xiàn)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue3保存屬性自動換行問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue懸浮可拖拽懸浮按鈕的實例代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
在element?ui中的日期時間選擇組件中默認是00:00,現(xiàn)在需求是點擊默認結束時間為當前時分秒,查了很多資料寫的都不準確?,今天給大家分享el-date-picker默認結束為當前時分秒的操作方法,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了vuepress打包之后頁面樣式丟失問題的兩種解決方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07