feat: 给员工在线列表加上动态滚动条

src/components/RightContent/Book/components/UserList/index.less

@@ -6,15 +6,20 @@
 }
 .custom-scroll::-webkit-scrollbar-track-piece,
 .custom-scrollbar::-webkit-scrollbar-track-piece {
-  background-color: transparent;
+  background-color: white;
 }
 .custom-scroll::-webkit-scrollbar-thumb:vertical,
 .custom-scrollbar::-webkit-scrollbar-thumb:vertical {
   background-color: #666666;
 }
+.custom-scroll.scrolling::-webkit-scrollbar,
+.custom-scrollbar.scrolling::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
 .custom-scroll::-webkit-scrollbar,
 .custom-scrollbar::-webkit-scrollbar {
-  width: 4px;
+  width: 0;
   height: 4px;
 }
 .custom-scroll::-webkit-scrollbar-corner,

src/components/RightContent/Book/components/UserList/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { useIntl } from 'umi'
 import './index.less'
 
@@ -16,8 +16,32 @@ type UserListProps = {
 }
 
 const UesrList: React.FC<UserListProps> = ({ onlineList }) => {
+  const ref = useRef()
+  const t = useRef()
   const [visible, setVisible] = useState(false)
   const intl = useIntl()
+  // const arr = []
+  // for (let i = 0; i < 100; i++) {
+  //   arr.push({
+  //     avatar: '/global/img/avtra',
+  //     department: '',
+  //     id: 'McjlQdO0O0Oi',
+  //     username: '杨卫东',
+  //     workStatus: 'menu.customer.client',
+  //     wsKey: '杨卫东'
+  //   })
+  // }
+  const handleOnScroll = () => {
+    if (!ref.current?.classList?.contains('scrolling')) {
+      ref.current?.classList?.add('scrolling')
+    }
+    clearTimeout(t.current)
+    t.current = setTimeout(() => {
+      ref.current?.classList?.remove('scrolling')
+    }, 450)
+  }
+
+  // const { run: tryHandleScroll } = useDebounceFn(handleOnScroll, { wait: 2500 })
   return (
     <>
       <span className="absolute top-70 left-[-0.75rem]" onClick={() => setVisible(!visible)}>
@@ -31,7 +55,7 @@ const UesrList: React.FC<UserListProps> = ({ onlineList }) => {
           visible ? 'show-short' : ''
         ].join(' ')}
       >
-        <div className="flex-1 h-full custom-scroll">
+        <div className="flex-1 h-full custom-scroll" ref={ref} onScroll={handleOnScroll}>
           <div className="w-full">
             <ul className="list-none m-0">
               {onlineList.map(item => {