Vue3實(shí)現(xiàn)滾動條自動滾動到底部
更新時間：2025年08月30日 14:16:19 作者：水果攤見
在Vue中,通過ref和watch結(jié)合nextTick實(shí)現(xiàn)滾動區(qū)域自動滾動到底部,并添加返回頂部按鈕,適用于動態(tài)內(nèi)容場景,供開發(fā)者參考
需求
在一個區(qū)域會依次打印log，隨著log的加長，出現(xiàn)滾動條，而滾動條應(yīng)該始終保持在最下方。
點(diǎn)擊回到頂部按鈕，可以使?jié)L動條回到最上方
方案
- 在滾動區(qū)域添加ref
- log為一個數(shù)組，對其添加watch
- 在watch函數(shù)中，使用nextTick，通過ref控制該區(qū)域滾動高度
- 綁定ref，監(jiān)測其height，使回到頂部按鈕出現(xiàn)，并通過ref控制滾動條回到頂部
代碼
// template
<div class="bottom-logs" ref="logRef">
// antd vue中的back-top組件
<a-back-top :target="() => logRef" :visibilityHeight="10" @click="handleBackToTop" />
<LogData :logData="log"></LogData>
</div>
// css
// 父級元素 display: flex
.bottom-logs {
flex: 1;
overflow: auto;
}
<script setup>
import { ref, watch, nextTick } from 'vue'
const logRef = ref();
// log為響應(yīng)式數(shù)組
watch(log, () => {
nextTick(() => {
const content = logRef.value;
content.scrollTo({ top: content.scrollHeight, behavior: "smooth" });
});
}, {
deep: true,
});
const handleBackToTop = () => {
const content = logRef.value;
content.scrollTo({ top: 0, behavior: "smooth" });
}
</script>
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
利用vue組件自定義v-model實(shí)現(xiàn)一個Tab組件方法示例
這篇文章主要給大家介紹了關(guān)于利用vue組件自定義v-model實(shí)現(xiàn)一個Tab組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
vue中el-checkbox全選、反選、多選的實(shí)現(xiàn)
這篇文章主要介紹了vue中el-checkbox全選、反選、多選的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue3父子通信ref,toRef,toRefs使用實(shí)例詳解
這篇文章主要介紹了vue3父子通信ref,toRef,toRefs使用實(shí)例詳解,分別介紹了ref是什么、toRef是什么及toRefs是什么和最佳使用方式,結(jié)合示例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了webstorm添加*.vue文件支持，webstorm很多的插件內(nèi)置，不用安裝插件，下面嘗試用vue和es6做項(xiàng)目，有興趣的可以了解一下2018-05-05
這篇文章主要介紹了vue中data和data()的區(qū)別說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
使用Vue3和Plotly.js打造一個3D圖在線展示的實(shí)現(xiàn)步驟
三維網(wǎng)格圖廣泛應(yīng)用于科學(xué)可視化、醫(yī)學(xué)成像、工程設(shè)計(jì)等領(lǐng)域,用于展示復(fù)雜的數(shù)據(jù)結(jié)構(gòu)和空間分布,本文給大家介紹了使用Vue3和Plotly.js打造一個3D圖在線展示的實(shí)現(xiàn)步驟,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-07-07
在本篇文章里小編給大家整理的是一篇關(guān)于vue中插槽整理及用法分析內(nèi)容，對此有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12
為了方便大家寫代碼，Vue 給大家提供了很多方便的修飾符，比如我們經(jīng)常用到的取消冒泡，阻止默認(rèn)事件等等，這篇文章將給大家分享Vue 中的常用的修飾符2022-08-08
這篇文章主要介紹了Vue+Vant 圖片上傳加顯示的案例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了前端漸進(jìn)式框架VUE的相關(guān)資料，文中講解的非常細(xì)致，幫助大家開始學(xué)習(xí)VUE，感興趣的朋友可以了解下2020-07-07