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