小视频滚动条加按钮

src/page/Meeting/index.module.scss

@@ -232,6 +232,11 @@
         position: relative;
         overflow: hidden;
 
+        #videoView {
+          position: relative;
+          border: 1px red solid;
+        }
+
         .standardModeIcon {
           position: absolute;
           left: 50%;
@@ -305,6 +310,10 @@
           .meetingContentSwiperCard {
             width: 100%;
           }
+
+          .meetingContentSwiperCard {
+            height: calc(100% / 6);
+          }
         }
 
         // 单画面模式
@@ -427,6 +436,22 @@
           }
         }
 
+        .meetingContentSwiperCaret {
+          position: absolute;
+          z-index: 2;
+          cursor: pointer;
+          background-color: rgba(0, 0, 0, 0.5);
+          color: white;
+          border: 1px white solid;
+          font-size: 20px;
+          width: 30px;
+          height: 30px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+
         .meetingContentBodyLeftBlock {
           position: absolute;
           background-color: #1F2022;

src/page/Meeting/index.tsx

@@ -4,7 +4,7 @@ import Operation from '@/components/Operation';
 import SpeakerModeModal from '@/components/SpeakerModeModal';
 import InvitingPersonnelModal from '@/components/InvitingPersonnelModal';
 import { Button, Input, Popover, Modal, Checkbox, message, Popconfirm, notification } from "antd";
-import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled, FullscreenExitOutlined, FullscreenOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled, FullscreenExitOutlined, FullscreenOutlined, QuestionCircleOutlined, CaretLeftOutlined, CaretRightOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { thumbImageBufferToBase64 } from '@/utils/package/base64'
 import { storage } from '@/utils';
@@ -1443,6 +1443,8 @@ const Meeting: React.FC = () => {
   }
   // 滚动
   const handleWheelChange = (e: any): void => {
+    setMeetingMode(res => {
+      if (res === 'StandardMode') {
         const container = document.getElementById('videoView') as HTMLElement;
         if (e.wheelDeltaY > 0) {
           container.scrollLeft -= 100
@@ -1450,6 +1452,9 @@ const Meeting: React.FC = () => {
           container.scrollLeft += 100
         }
       }
+      return res
+    })
+  }
   // 渲染视频
   const renderVideo = async (uid: string = ''): Promise<void> => {
     if (isClickLock) {
@@ -2595,6 +2600,30 @@ const Meeting: React.FC = () => {
                   </div> : null)
                 }
                 )}
+                {roomUserList.length > 6 ? <div>
+                  {meetingMode === "StandardMode" ? <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '20px', top: '66px' }} onClick={() => {
+                    const container = document.getElementById('videoView') as HTMLElement;
+                    container.scrollLeft -= 100
+                  }}>
+                    <CaretLeftOutlined />
+                  </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '8.2%', top: '20px' }} onClick={() => {
+                    const container = document.getElementById('videoView') as HTMLElement;
+                    container.scrollTop -= 100
+                  }}>
+                    <CaretUpOutlined />
+                  </div>}
+                  {meetingMode === "StandardMode" ? <div className={`${styles.meetingContentSwiperCaret}`} style={{ right: '20px', top: '66px' }} onClick={() => {
+                    const container = document.getElementById('videoView') as HTMLElement;
+                    container.scrollLeft += 100
+                  }}>
+                    <CaretRightOutlined />
+                  </div> : <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '8.2%', bottom: '20px' }} onClick={() => {
+                    const container = document.getElementById('videoView') as HTMLElement;
+                    container.scrollTop += 100
+                  }}>
+                    <CaretDownOutlined />
+                  </div>}
+                </div> : null}
                 {currentLookUserStatus === 0 ?
                   <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                     <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>