feat: motion

src/components/stateless/FixTabPanel/index.jsx

@@ -1,7 +1,19 @@
 import React from 'react'
 
-const FixTabPanel = ({ style, children }) => (
-  <div style={{ width: '100%', minHeight: 'calc(100vh - 232px)', ...style }}>{children}</div>
-)
+const FixTabPanel = React.forwardRef(({ style, children }, ref) => (
+  <div
+    ref={ref}
+    style={{
+      width: '100%',
+      height: 'calc(100vh - 204px)',
+      position: 'relative',
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+))
 
 export default FixTabPanel

src/pages/layout/proTabs/index.jsx

@@ -131,6 +131,7 @@ const ProTabs = (props) => {
       id="container"
       tabBarStyle={{
         zIndex: 2,
+        marginBottom: 0,
       }}
       activeKey={activeKey}
       destroyInactiveTabPane={false}

src/pages/motion/index.jsx

@@ -1,5 +1,5 @@
-import React, { useState, useRef } from 'react'
-import { motion, useAnimationControls, LayoutGroup } from 'motion/react'
+import React, { useEffect, useState, useRef } from 'react'
+import { motion, useAnimationControls, LayoutGroup, useScroll } from 'motion/react'
 import FixTabPanel from '@stateless/FixTabPanel'
 import { is } from '@react-spring/shared'
 
@@ -90,11 +90,27 @@ const ParallaxVert = () => {
   const [listLabel, setListLabel] = useState(['JavaScript', 'html', 'css', 'webAssembly'])
   const [isBig, setBigState] = useState(false)
   const [leftState, setLeftState] = useState(false)
+  const scrollRef = useRef(null)
+
+  const { scrollYProgress } = useScroll({
+    container: scrollRef,
+  })
 
   return (
-    <FixTabPanel>
+    <FixTabPanel ref={scrollRef}>
       <h2>Hi, Motion</h2>
-
+      <motion.div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: 3,
+          backgroundColor: '#aaa',
+          borderRadius: '3px',
+          scaleX: scrollYProgress,
+        }}
+      ></motion.div>
       <motion.div
         style={{
           width: 100,

src/pages/reactGantt/index.jsx

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect } from 'react'
 import { Gantt, Willow } from 'wx-react-gantt'
+import FixTabPanel from '@stateless/FixTabPanel'
 import 'wx-react-gantt/dist/gantt.css'
 const ReactGantt = () => {
   const tasks = [
@@ -53,9 +54,11 @@ const ReactGantt = () => {
   ]
 
   return (
-    <Willow>
-      <Gantt tasks={tasks} links={links} scales={scales} />
-    </Willow>
+    <FixTabPanel>
+      <Willow>
+        <Gantt tasks={tasks} links={links} scales={scales} />
+      </Willow>
+    </FixTabPanel>
   )
 }
 

src/styles/reset.css

@@ -118,26 +118,27 @@ select:-webkit-autofill:active {
 }
 
 .layout-container {
-  overflow: auto;
+  overflow: hidden;
   height: 100%;
   width: 100%;
 }
 
 .layout-container .wui-ant-tabs-content > .wui-ant-tabs-tabpane {
-  padding: 16px;
+  padding: 0 4px 8px 8px;
 }
 
 .layout-container .pro-tabs {
   z-index: 10;
+  margin-bottom: 0;
 }
 
 .layout-container .layout-tabpanel {
   width: 100%;
-  min-height: calc(100vh - 232px);
+  min-height: calc(100vh - 204px);
   display: flex;
   justify-content: center;
   align-items: center;
-  overflow: auto;
+  overflow: hidden;
 }
 
 @keyframes rotate {