Vue3實現(xiàn)滾動條自動滾動到底部

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

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

需求

在一個區(qū)域會依次打印log，隨著log的加長，出現(xià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為響應式數(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>

總結

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

您可能感興趣的文章:

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