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

前端程序媛Ying2025-07-28 16:46

使用vue自带的监听滚动功能v-on:scroll，滚动条变化时，会调用方法 checkScrollStatus，如果滚动条在容器底部时，则隐藏按钮，否则显示按钮，点击按钮能一键滚动到底部。

html 复制代码

<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

javascript 复制代码

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