docs: fix sidebar navigation in API reference (#11179)

www/packages/docs-ui/src/hooks/use-active-on-scroll/index.tsx

@@ -98,6 +98,18 @@ export const useActiveOnScroll = ({
     if (!enable) {
       return
     }
+    const rootBoundingRectElm =
+      root && "getBoundingClientRect" in root
+        ? root.getBoundingClientRect()
+        : root?.body.getBoundingClientRect()
+
+    if (
+      rootBoundingRectElm === undefined ||
+      (rootBoundingRectElm.top < 0 && rootBoundingRectElm.bottom < 0)
+    ) {
+      setActiveItemId("")
+      return
+    }
     const headings = getHeadingsInElm()
     let selectedHeadingByHash: HTMLHeadingElement | undefined = undefined
     const hash = location.hash.replace("#", "")
@@ -129,17 +141,19 @@ export const useActiveOnScroll = ({
       }
     })
 
-    const negativeDistanceToHalfway = Math.abs(
-      halfway + closestNegativeDistance
-    )
-    const positiveDistanceToHalfway = Math.abs(
-      halfway - closestPositiveDistance
-    )
+    const negativeDistanceToHalfway = closestNegativeDistance
+      ? Math.abs(halfway + closestNegativeDistance)
+      : 0
+    const positiveDistanceToHalfway = closestPositiveDistance
+      ? Math.abs(halfway - closestPositiveDistance)
+      : 0
 
     const chosenClosest =
-      negativeDistanceToHalfway > positiveDistanceToHalfway
-        ? closestNegativeHeading
-        : closestPositiveHeading
+      !negativeDistanceToHalfway && !positiveDistanceToHalfway
+        ? undefined
+        : negativeDistanceToHalfway > positiveDistanceToHalfway
+          ? closestNegativeHeading
+          : closestPositiveHeading
 
     setActiveItemId(
       chosenClosest
@@ -152,7 +166,7 @@ export const useActiveOnScroll = ({
               : ""
             : ""
     )
-  }, [getHeadingsInElm, items, enable])
+  }, [getHeadingsInElm, items, enable, root])
 
   useEffect(() => {
     if (!scrollableElement || !enable) {

www/packages/docs-ui/src/hooks/use-scroll-utils/index.tsx

@@ -106,6 +106,7 @@ function useScrollControllerContextValue({
       // 56 is the height of the navbar
       // might need a better way to determine it.
       top: top - parentOffsetTop - 56,
+      behavior: "instant",
     })
   }