实现自定义指令 v-scrollBar，用于动态显示/隐藏滚动条，提升用户体验

暴富暴富暴富啦啦啦2025-12-26 9:31

javascript 复制代码

// src/directives/scrollbar.js
export default {
  mounted(el, binding) {
    // 初始化滚动条状态
    hideScrollbar(el);
    
    // 添加滚动事件监听
    let scrollTimer = null;
    
    const handleScroll = () => {
      // 显示滚动条
      showScrollbar(el);
      
      // 清除之前的定时器
      if (scrollTimer) {
        clearTimeout(scrollTimer);
      }
      
      // 设置新的定时器，在停止滚动后隐藏滚动条
      scrollTimer = setTimeout(() => {
        hideScrollbar(el);
      }, binding.value || 1000); // 默认1秒后隐藏，可通过指令参数自定义
    };
    
    // 保存定时器引用到元素上，便于销毁时清理
    el._scrollTimer = scrollTimer;
    el._scrollHandler = handleScroll;
    
    // 绑定滚动事件
    el.addEventListener('scroll', handleScroll);
  },
  
  unmounted(el) {
    // 清理事件监听和定时器
    if (el._scrollHandler) {
      el.removeEventListener('scroll', el._scrollHandler);
    }
    
    if (el._scrollTimer) {
      clearTimeout(el._scrollTimer);
    }
  }
};

// 显示滚动条的函数
function showScrollbar(el) {
  el.classList.add('show-scrollbar');
}

// 隐藏滚动条的函数
function hideScrollbar(el) {
  el.classList.remove('show-scrollbar');
}

使用

html 复制代码

<div class="record-wrap" v-scrollBar>
   <DynamicRecordSuvery :flag="flag" :messageId="messageId" :thoughtContents="thoughtContent" @getItem="getItem" />
</div>

css 复制代码

.record-wrap {
  flex-grow: 1;
  overflow-y: auto;
  margin-bottom: 10px;
  padding: 15px;
  /* 隐藏默认滚动条 */
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .record-box {
    width: 100%;
  }
}

/* 显示滚动条（指令添加.show-scrollbar时） */
.record-wrap.show-scrollbar {
   scrollbar-width: thin;
   &::-webkit-scrollbar {
       display: block;
       width: 8px;
   }
}