背景：
在做h5項(xiàng)目中的聊天頁(yè)面時(shí)，需求是進(jìn)入頁(yè)面自動(dòng)滾到底部，方便用戶看到最新消息（因?yàn)橄⑹钦蚺帕械?，最新消息自然展示在底部）?/p>
?直接上代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-602729.html
<script setup>
import { onMounted, ref, nextTick, watch} from 'vue';
import { getMyQuestionDetail} from "@/api/order.js";
const questionForm = ref({});
/**
* 查看記錄
*/
const getMyQuestion = async () => {
const { data } = await getMyQuestionDetail({questionCode, answerOrderBy: "ASC"})
questionForm.value = data
};
/**
* 滾動(dòng)到底部
*/
const scrollToBottom = () => {
nextTick(() => {
const child = document.querySelector(`#main`) // 需要滾動(dòng)的元素
window.scrollTo({
top: child.scrollHeight ,
behavior: "smooth"
})
})
}
// 數(shù)據(jù)拿到后開啟滾動(dòng)，以防scrollHeight為0, 不滾動(dòng)
watch(questionForm, () => {
scrollToBottom()
})
onMounted(() => {
getMyQuestion()
});
</script>
<template>
<div id="main">
<!-- 記錄內(nèi)容 -->
</div>
<div class="submit">
<!-- 固定在頁(yè)面底部的提交按鈕 -->
</div>
</template>主要代碼：文章來源地址http://www.zghlxwxcb.cn/news/detail-602729.html
const child = document.querySelector(`#main`) // 需要滾動(dòng)的元素
window.scrollTo({
top: child.scrollHeight ,
behavior: "smooth"
})到了這里，關(guān)于vue3 h5進(jìn)入頁(yè)面后自動(dòng)滾動(dòng)到底部的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[Unity學(xué)習(xí)]使用ScrollRect實(shí)現(xiàn)自動(dòng)滾動(dòng)到底部顯示實(shí)時(shí)消息，并在拖動(dòng)的時(shí)候取消自動(dòng)滾動(dòng)，再次手動(dòng)滑到底部，又繼續(xù)自動(dòng)滾動(dòng)](https://imgs.yssmx.com/Uploads/2024/02/603566-1.gif)
