feat: 滚动

apps/web-main/src/components/TimeScroll/index.tsx

@@ -7,10 +7,15 @@ export interface IOnScrollParam {
   height: number;
 }
 
+export interface IModel {
+  top: number;
+}
+
 interface IProps {
   className: string;
   data: any;
   onScroll?: (p: IOnScrollParam) => void;
+  model?: IModel;
 }
 
 /**
@@ -62,6 +67,10 @@ function TimeScroll(props: IProps) {
       setCursorActive((p) => ({ ...p, top: mouseY - orbitClient.top - 4 }));
   };
 
+  useEffect(() => {
+    setCursorStatic((p) => ({ ...p, top: props.model!.top }));
+  }, [props.model]);
+
   useEffect(() => {
     if (props.onScroll)
       props.onScroll({

apps/web-main/src/view/Course/index.less

@@ -5,7 +5,7 @@
   height: 100vh;
   .recommends {
     display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
+    grid-template-columns: 1fr 1.5fr 1fr;
     grid-column-gap: 20px;
   }
 

apps/web-main/src/view/Course/index.tsx

@@ -21,6 +21,10 @@ import { Icon } from "@ricons/utils";
 
 export default function Index() {
   const scrollContainerRef = useRef<HTMLElement | null>(null);
+  const ratioRef = useRef<number>(1);
+  const [timescroll, setTimescroll] = useState({
+    top: -4,
+  });
 
   const dropList = (
     <Menu>
@@ -56,8 +60,16 @@ export default function Index() {
     const { top, height } = p;
     //左侧区域高度
     const { scrollHeight, clientHeight } = scrollContainerRef.current!;
-    const ratio = (scrollHeight - clientHeight) / height;
+    ratioRef.current = (scrollHeight - clientHeight) / height;
-    scrollContainerRef.current!.scrollTop = top * ratio;
+    scrollContainerRef.current!.scrollTop = top * ratioRef.current;
+  };
+
+  const onScroll = () => {
+    const { scrollHeight, scrollTop } = scrollContainerRef.current!;
+    const isTop = scrollTop === 0;
+    const isBottom = scrollTop === scrollHeight;
+    const top = scrollTop / ratioRef.current;
+    setTimescroll({ top: isTop ? -4 : top });
   };
 
   return (
@@ -100,7 +112,7 @@ export default function Index() {
       </div>
       <div className="timeline">
         <div className="thumbnail">
-          <article ref={scrollContainerRef}>
+          <article ref={scrollContainerRef} onScroll={onScroll}>
             {courseTimeList.map((item, index) => (
               <section key={index}>
                 <div className="time">
@@ -120,6 +132,7 @@ export default function Index() {
           className="timescroll"
           data={courseTimeList}
           onScroll={onTimeScroll}
+          model={{ top: timescroll.top }}
         />
       </div>
     </div>