Feat scrollbar auto hide and show

src/directives/v-scroll.ts

@@ -0,0 +1,36 @@
+import { throttle } from 'lodash'
+import type { Directive } from 'vue'
+
+let timer: number | undefined
+
+const handleScroll = throttle((el) => {
+  if (timer) {
+    clearTimeout(timer)
+  }
+  if (el.classList.contains('auto-hide-scroll')) {
+    el.classList.remove('auto-hide-scroll')
+  }
+  if (!el.classList.contains('auto-show-scroll')) {
+    el.classList.add('auto-show-scroll')
+  }
+  timer = setTimeout(() => {
+    el.classList.remove('auto-show-scroll')
+    el.classList.add('auto-hide-scroll')
+  }, 2000)
+}, 200)
+
+const vScroll: Directive = {
+  mounted(el) {
+    el.fn = handleScroll.bind(null, el)
+    el.classList.add('auto-hide-scroll')
+    el.addEventListener('wheel', el.fn)
+  },
+  unmounted(el) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    el.removeEventListener('wheel', el.fn)
+  },
+}
+
+export default vScroll

src/main.ts

@@ -12,6 +12,7 @@ import 'dayjs/locale/zh-cn'
 import './styles/main.css'
 import '@/utils/websocket'
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
+import vScroll from './directives/v-scroll'
 
 dayjs.locale('zh-cn') // 设置 dayjs 语言
 dayjs.extend(weekday) // 设置一周起始位周一
@@ -24,4 +25,5 @@ app.use(pinia)
 app.use(router)
 app.directive('login', vLogin) // 登录权限指令-未登录先登录
 app.directive('login-show', vLoginShow) // 登录权限指令-未登录先登录
+app.directive('scroll', vScroll)
 app.mount('#app')

src/styles/main.css

@@ -31,3 +31,21 @@
 [hidden] {
   display: none !important;
 }
+
+.auto-show-scroll {
+  scrollbar-width: block;
+  -ms-overflow-style: block;
+}
+
+.auto-show-scroll::-webkit-scrollbar {
+  display: block;
+}
+
+.auto-hide-scroll {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.auto-hide-scroll::-webkit-scrollbar {
+  display: none;
+}

src/views/Home/components/ChatList/index.vue

@@ -67,6 +67,7 @@ const getKey = (item: MessageType) => item.message.id
       <IEpLoading />消息加载中
     </el-icon>
     <VirtualList
+      v-scroll
       v-if="chatStore.chatMessageList?.length"
       ref="virtualListRef"
       class="virtual-list scroll-hover"

src/views/Home/components/UserList/index.vue

@@ -56,6 +56,7 @@ const hiddenGroupListShow = () => (groupStore.showGroupList = false)
     <div class="user-list-wrapper" :class="groupStore.showGroupList ? 'show' : ''">
       <div class="user-list-header">在线人数：{{ statistic.onlineNum || 0 }}</div>
       <TransitionGroup
+        v-scroll
         v-show="groupUserList?.length"
         tag="ul"
         name="fade"