快捷導(dǎo)航

Vue3實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)到底部

更新時(shí)間：2025年08月30日 14:16:19 作者：水果攤見

在Vue中,通過ref和watch結(jié)合nextTick實(shí)現(xiàn)滾動(dòng)區(qū)域自動(dòng)滾動(dòng)到底部,并添加返回頂部按鈕,適用于動(dòng)態(tài)內(nèi)容場景,供開發(fā)者參考

需求

在一個(gè)區(qū)域會(huì)依次打印log，隨著log的加長，出現(xiàn)滾動(dòng)條，而滾動(dòng)條應(yīng)該始終保持在最下方。

點(diǎn)擊回到頂部按鈕，可以使?jié)L動(dòng)條回到最上方

方案

在滾動(dòng)區(qū)域添加ref
log為一個(gè)數(shù)組，對其添加watch
在watch函數(shù)中，使用nextTick，通過ref控制該區(qū)域滾動(dòng)高度
綁定ref，監(jiān)測其height，使回到頂部按鈕出現(xiàn)，并通過ref控制滾動(dòng)條回到頂部

代碼

// 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
// 父級(jí)元素 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é)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3使用exceljs將excel文件轉(zhuǎn)化為html預(yù)覽最佳方案
在企業(yè)應(yīng)用中,我們時(shí)常會(huì)遇到需要上傳并展示 Excel 文件的需求,以實(shí)現(xiàn)文件內(nèi)容的在線預(yù)覽,經(jīng)過一番探索與嘗試,筆者最終借助 exceljs 這一庫成功實(shí)現(xiàn)了該功能,本文將以 Vue 3 為例,演示如何實(shí)現(xiàn)該功能,需要的朋友可以參考下
2025-05-05
如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作
這篇文章主要介紹了如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue Cli 環(huán)境刪除與重裝教程 - 版本文檔
這篇文章主要介紹了vue Cli 環(huán)境刪除與重裝教程 - 版本文檔，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue關(guān)閉開發(fā)模式提示的簡單解決辦法
Vue開發(fā)模式是一種基于Vue.js框架的開發(fā)方式,它可以幫助開發(fā)者更高效地構(gòu)建和維護(hù)復(fù)雜的Web應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于vue關(guān)閉開發(fā)模式提示的簡單解決辦法,需要的朋友可以參考下
2024-04-04
Vue?Router中Matcher的初始化流程
這篇文章主要介紹了Vue?Router中Matcher的初始化流程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue vue-Router默認(rèn)hash模式修改為history需要做的修改詳解
今天小編就為大家分享一篇vue vue-Router默認(rèn)hash模式修改為history需要做的修改詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
element-ui中select組件綁定值改變,觸發(fā)change事件方法
今天小編就為大家分享一篇element-ui中select組件綁定值改變,觸發(fā)change事件方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
一文帶你重新學(xué)習(xí)Vue中的按鍵監(jiān)聽和鼠標(biāo)監(jiān)聽
這篇文章主要為大家詳細(xì)介紹了Vue中的按鍵監(jiān)聽和鼠標(biāo)監(jiān)聽的常見實(shí)現(xiàn)方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-07-07
vue中watch監(jiān)聽器的觸發(fā)時(shí)機(jī)(watch的坑及解決)
這篇文章主要介紹了vue中watch監(jiān)聽器的觸發(fā)時(shí)機(jī)(watch的坑及解決)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
如何在 Vue 中使用 Axios 異步請求API
Axios 是 Javascript 中最受歡迎的 HTTP 庫之一，我們可以用它在 Vue 程序中調(diào)用API。在本文中我們用 Vue 3 和 Axios 寫一個(gè)侃爺語錄小應(yīng)用，可以用這個(gè)小程序?qū)W習(xí)英語，同時(shí)也能從侃爺?shù)脑捴械玫揭恍﹩l(fā)，而且還可以學(xué)習(xí)用 Vue 異步請求API，一舉多得，何樂而不為呢？
2021-05-05