使用vue自帶的監聽滾動功能v-on:scroll，滾動條變化時，會調用方法?checkScrollStatus，如果滾動條在容器底部時，則隱藏按鈕，否則顯示按鈕，點擊按鈕能一鍵滾動到底部。

<div class="chat-area" ref="chatAreaRef" v-on:scroll="checkScrollStatus">...具體渲染的內容
</div><-- 按鈕 -->
<div @click="scrollBottom" class="scroll-btn" v-show="showScrollBtn"><i class="iconfont icon-a-zhedieiconbeifen5" />
</div>// 樣式 這里因為內容區域是對話框，所以反轉了dom.chat-area {height: 0;flex: 1;overflow-y: auto;display: flex;flex-direction: column-reverse;}

?這里因為內容區域是對話框，所以反轉了dom，所以下面的方法里的container.scrollTop在滾動到底的時候是0，正常的dom不是0

      const chatAreaRef = ref(null)// 檢查滾動狀態并更新按鈕顯示checkScrollStatus() {// 確保DOM已加載if (!chatAreaRef.value) return;const container = chatAreaRef.value;const scrollPosition = container.scrollTop;// console.log('元素內部滾動距離：', scrollPosition);// 內容高度 > 容器高度（存在滾動條）const hasScrollbar = container.scrollHeight > container.clientHeight;// 1. 內容高度 > 容器高度（存在滾動條）if (hasScrollbar) {// 底部對應 scrollPosition = 0 → 隱藏按鈕// 非底部對應 scrollPosition ≠ 0 → 顯示按鈕if (scrollPosition !== 0) {state.showScrollBtn = true} else {state.showScrollBtn = false}} else {state.showScrollBtn = false}// console.log(state.showScrollBtn, '--showScrollBtn--')},// 滾動到底部scrollBottom() {if (!chatAreaRef.value) return;const container = chatAreaRef.value;chatAreaRef.value.scrollTo({top: 0,behavior: 'smooth'});// 滾動后更新按鈕狀態nextTick(() => {methods.checkScrollStatus();})},