fix: 优化滑动跳转效果

src/pages/procurement/components/bidDetailHeader/index.tsx

@@ -32,9 +32,7 @@ const BidDetailHeader:React.FC<BidDetailHeaderProps> = ({
   const [current, setCurrent] = useState<number>(0)
   const [isFixed, setIsFixed] = useState<boolean>(false)
 
-
   useEffect(() => {
-    // window.addEventListener("scroll", debounce(onScroll, 500));
     window.addEventListener("scroll", onScroll)
     return (()=>{
       window.removeEventListener('scroll', onScroll)
@@ -49,50 +47,36 @@ const BidDetailHeader:React.FC<BidDetailHeaderProps> = ({
         setCurrent(index)
       }
     })
-    // // @todo 不使用防抖情况下 焦点会出现抖动；使用防抖，固定头部会延迟或者无效
-    // // 锚点导航距离顶端距离
-    // let navDom: any = document.getElementById("anchorTitle")
-    // if(navDom) {
-    //   let distance = navDom.offsetTop  -  document.documentElement.scrollTop
-    //   if(!flagRef.current.flag) {
-    //     flagRef.current.distanceTop = navDom.offsetTop
-    //     flagRef.current.flag = true
-    //   }
+    // 锚点导航距离顶端距离
+    let navDom: any = document.getElementById("anchorTitle")
+    if(navDom) {
+      let distance = navDom.offsetTop  -  document.documentElement.scrollTop
+      if(!flagRef.current.flag) {
+        flagRef.current.distanceTop = navDom.offsetTop
+        flagRef.current.flag = true
+      }
 
-    //   if(distance <= 0) {
-    //     setIsFixed(true)
-    //   }
+      if(distance <= 0) {
+        setIsFixed(true)
+      }
 
-    //   if(document.documentElement.scrollTop <= flagRef.current.distanceTop) {
-    //     setIsFixed(false)
-    //   }
-    // }
+      if(document.documentElement.scrollTop <= flagRef.current.distanceTop) {
+        setIsFixed(false)
+      }
+    }
   }
 
   const clickItem = (index: any) => {
-    setCurrent(index)
-    console.log(formContext.offsetTopList, 'context', formContext.offsetTopList[index])
     let distance = formContext.offsetTopList[index] - 140
     window.scrollTo({
       top: distance < 0 ? 0 : distance,
       behavior: "smooth"
-    });
-    if(index > 0) setIsFixed(true)
-    else setIsFixed(false)
+    })
+    let dom = document.documentElement || document.body
+    if(formContext.offsetTopList[index] - 189 + dom.clientHeight >= dom.scrollHeight) {
+      setCurrent(index)
+    }
   }
-
-  // // 简单的防抖动函数
-  // const debounce = (func, wait, immediate?) => {
-  //   // setIsFixed(true)
-  //   // 定时器变量
-  //   let timeout;
-  //   return () => {
-  //       // 每次触发 scroll handler 时先清除定时器
-  //       clearTimeout(timeout);
-  //       // 指定 xx ms 后触发真正想进行的操作 handler
-  //       timeout = setTimeout(func, wait);
-  //   };
-  // }
 
   return (
     <div className={isFixed ? [style.detailHeader, style.anchorTitleFixed].join(' '): style.detailHeader} id="detailHeader">

src/pages/procurement/components/bidMaterial/index.tsx

@@ -40,18 +40,6 @@ const BidMaterial: React.FC<BidMaterialProps> = ({cardTitle}) => {
 
   const titleMap = ['基本信息', '产地', '外观尺寸', '工艺', '特殊说明', '附件', '采购数量']
 
-  // // 简单的防抖动函数
-  // const debounce = (func, wait, immediate?) => {
-  //   // 定时器变量
-  //   let timeout;
-  //   return () => {
-  //       // 每次触发 scroll handler 时先清除定时器
-  //       clearTimeout(timeout);
-  //       // 指定 xx ms 后触发真正想进行的操作 handler
-  //       timeout = setTimeout(func, wait);
-  //   };
-  // }
-
   const onScroll = (e) => {
     if(e.target.className === 'ant-drawer-body') {
       let scrollTop = document.querySelectorAll(".ant-drawer-body")[0].scrollTop
@@ -121,11 +109,15 @@ const BidMaterial: React.FC<BidMaterialProps> = ({cardTitle}) => {
   }
 
   const handleClick = (i: number) => {
-    setCurrent(i)
-    document.querySelectorAll(".ant-drawer-body")[0].scroll({
+    let dom = document.querySelectorAll(".ant-drawer-body")[0]
+    dom.scroll({
       'top': offsetTopList[i] - 16,
       behavior: "smooth",
     })
+    // scrollTop + clientHeight == scrollHeight
+    if(offsetTopList[i] + dom.clientHeight >= dom.scrollHeight) {
+      setCurrent(i)
+    }
   }
 
   return (<>