点击按钮滚动到底功能vue的v-on:scroll运用

使用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();})},