@rxdrag/website-lib-core 0.0.11 → 0.0.13

package/src/react/components/RichTextOutline/useAcitviedHeading.ts

@@ -1,54 +1,81 @@
-import { useCallback, useEffect, useState } from 'react';
-
-export function useAcitviedHeading() {
-  const [activeId, setActiveId] = useState<string | null>(null);
-
-  const handleScroll = useCallback(() => {
-    const anchorElements = document.querySelectorAll('a[href^="#"]');
-    let closestId = null;
-    let closestDistance = Infinity;
-
-    anchorElements.forEach((element) => {
-      const id = element.getAttribute('href')?.slice(1) || '';
-      const targetElement = document.getElementById(id);
-      if (targetElement) {
-        const { top } = targetElement.getBoundingClientRect();
-        const distance = Math.abs(top);
-        // 寻找最接近视口顶部但不超过视口顶部的锚点
-        if (top <= 160 && distance < closestDistance) {
-          closestId = id;
-          closestDistance = distance;
-        }
-      }
-    });
-
-    setActiveId(closestId);
-  }, []);
-
-  useEffect(() => {
-    const handleHashChange = () => {
-      const hash = window.location.hash.substring(1); // 获取哈希值（去掉#）
-      setActiveId(hash);
-
-      const element = document.getElementById(hash);
-      if (element) {
-        const yOffset = -100; // 偏移量
-        const y = element.getBoundingClientRect().top + window.scrollY - yOffset;
-        window.scrollTo({ top: y, behavior: 'smooth' });
-      }
-    };
-
-    window.addEventListener('hashchange', handleHashChange);
-    window.addEventListener('scroll', handleScroll);
-
-    // 初始化时检查当前哈希值
-    handleHashChange();
-
-    return () => {
-      window.removeEventListener('hashchange', handleHashChange);
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll]);
-
-  return activeId;
-}
+import { useCallback, useEffect, useState, useRef, useMemo } from "react";
+import { throttle } from "lodash-es";
+
+export function useAcitviedHeading(yOffset = 200) {
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const anchorElementsRef = useRef<HTMLAnchorElement[]>([]);
+  const lastScrollTopRef = useRef(0);
+  const activeIdRef = useRef<string | null>(null);
+
+  // 同步 activeId 到 ref
+  useEffect(() => {
+    activeIdRef.current = activeId;
+  }, [activeId]);
+
+  // 初始化时获取所有锚点元素
+  useEffect(() => {
+    anchorElementsRef.current = Array.from(
+      document.querySelectorAll('a[href^="#"]')
+    );
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    const scrollTop = window.scrollY;
+    lastScrollTopRef.current = scrollTop;
+
+    let closestId = null;
+    let closestDistance = Infinity;
+
+    anchorElementsRef.current.forEach((element) => {
+      const id = element.getAttribute("href")?.slice(1) || "";
+      const targetElement = document.getElementById(id);
+
+      if (targetElement) {
+        const { top } = targetElement.getBoundingClientRect();
+        const distance = Math.abs(top);
+        if (top <= yOffset && distance < closestDistance) {
+          closestId = id;
+          closestDistance = distance;
+        }
+      }
+    });
+
+    if (activeIdRef.current !== closestId) {
+      setActiveId(closestId);
+    }
+  }, [yOffset]); // 移除 activeId 依赖，因为我们只需要比较当前值
+
+  // 使用节流函数包装handleScroll
+  const throttledHandleScroll = useMemo(
+    () => throttle(handleScroll, 100, { leading: true, trailing: true }),
+    [handleScroll]
+  );
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.substring(1);
+      setActiveId(hash);
+
+      const element = document.getElementById(hash);
+      if (element) {
+        const y =
+          element.getBoundingClientRect().top + window.scrollY - yOffset;
+        window.scrollTo({ top: y, behavior: "smooth" });
+      }
+    };
+
+    window.addEventListener("hashchange", handleHashChange);
+    window.addEventListener("scroll", throttledHandleScroll);
+
+    // 初始化时检查当前哈希值
+    handleHashChange();
+
+    return () => {
+      window.removeEventListener("hashchange", handleHashChange);
+      window.removeEventListener("scroll", throttledHandleScroll);
+      throttledHandleScroll.cancel(); // 清理节流函数
+    };
+  }, [handleScroll, throttledHandleScroll, yOffset]);
+
+  return activeId;
+}