docs: fixed sidebar in API reference (#5871)

www/apps/api-reference/components/MDXComponents/H2/index.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import { InView } from "react-intersection-observer"
-import { useSidebar } from "docs-ui"
+import { isElmWindow, useScrollController, useSidebar } from "docs-ui"
 import checkElementInViewport from "../../../utils/check-element-in-viewport"
-import { useEffect } from "react"
+import { useEffect, useMemo } from "react"
 import getSectionId from "../../../utils/get-section-id"
 
 type H2Props = {
@@ -12,6 +12,7 @@ type H2Props = {
 
 const H2 = ({ addToSidebar = true, children, ...props }: H2Props) => {
   const { activePath, setActivePath, addItems } = useSidebar()
+  const { getScrolledTop, scrollableElement } = useScrollController()
 
   const handleViewChange = (
     inView: boolean,
@@ -24,7 +25,7 @@ const H2 = ({ addToSidebar = true, children, ...props }: H2Props) => {
     if (
       (inView ||
         checkElementInViewport(heading.parentElement || heading, 40)) &&
-      window.scrollY !== 0 &&
+      getScrolledTop() !== 0 &&
       activePath !== heading.id
     ) {
       // can't use next router as it doesn't support
@@ -50,6 +51,10 @@ const H2 = ({ addToSidebar = true, children, ...props }: H2Props) => {
     ])
   }, [])
 
+  const root = useMemo(() => {
+    return isElmWindow(scrollableElement) ? document.body : scrollableElement
+  }, [scrollableElement])
+
   return (
     <InView
       as="h2"
@@ -59,6 +64,7 @@ const H2 = ({ addToSidebar = true, children, ...props }: H2Props) => {
       {...props}
       onChange={handleViewChange}
       id={id}
+      root={root}
     >
       {children}
     </InView>

www/apps/api-reference/components/Tags/Operation/index.tsx

@@ -7,7 +7,7 @@ import getSectionId from "@/utils/get-section-id"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import dynamic from "next/dynamic"
 import { useInView } from "react-intersection-observer"
-import { useSidebar } from "docs-ui"
+import { isElmWindow, useScrollController, useSidebar } from "docs-ui"
 import type { TagOperationCodeSectionProps } from "./CodeSection"
 import TagsOperationDescriptionSection from "./DescriptionSection"
 import DividedLayout from "@/layouts/Divided"
@@ -40,10 +40,14 @@ const TagOperation = ({
   )
   const nodeRef = useRef<Element | null>(null)
   const { loading, removeLoading } = useLoading()
+  const { scrollableElement } = useScrollController()
+  const root = useMemo(() => {
+    return isElmWindow(scrollableElement) ? document.body : scrollableElement
+  }, [scrollableElement])
   const { ref } = useInView({
     threshold: 0.3,
     rootMargin: `112px 0px 112px 0px`,
-    root: document.getElementById("main") || document.body,
+    root,
     onChange: (changedInView) => {
       if (changedInView) {
         if (!show) {

www/apps/api-reference/components/Tags/Section/index.tsx

@@ -4,7 +4,7 @@ import getSectionId from "@/utils/get-section-id"
 import type { OpenAPIV3 } from "openapi-types"
 import { useInView } from "react-intersection-observer"
 import { useEffect, useMemo, useState } from "react"
-import { useSidebar } from "docs-ui"
+import { isElmWindow, useScrollController, useSidebar } from "docs-ui"
 import dynamic from "next/dynamic"
 import type { SectionProps } from "../../Section"
 import type { MDXContentClientProps } from "../../MDXContent/Client"
@@ -40,10 +40,14 @@ const TagSection = ({ tag }: TagSectionProps) => {
   const slugTagName = useMemo(() => getSectionId([tag.name]), [tag])
   const { area } = useArea()
   const pathname = usePathname()
+  const { scrollableElement } = useScrollController()
+  const root = useMemo(() => {
+    return isElmWindow(scrollableElement) ? document.body : scrollableElement
+  }, [scrollableElement])
   const { ref } = useInView({
     threshold: 0.5,
     rootMargin: `112px 0px 112px 0px`,
-    root: document.getElementById("main") || document.body,
+    root,
     onChange: (inView) => {
       if (inView && !loadPaths) {
         setLoadPaths(true)

www/apps/api-reference/providers/index.tsx

@@ -25,15 +25,15 @@ const Providers = ({ children }: ProvidersProps) => {
         <ModalProvider>
           <ColorModeProvider>
             <BaseSpecsProvider>
-              <SidebarProvider>
-                <NavbarProvider>
-                  <ScrollControllerProvider scrollableSelector="#main">
+              <ScrollControllerProvider scrollableSelector="#main">
+                <SidebarProvider>
+                  <NavbarProvider>
                     <SearchProvider>
                       <MobileProvider>{children}</MobileProvider>
                     </SearchProvider>
-                  </ScrollControllerProvider>
-                </NavbarProvider>
-              </SidebarProvider>
+                  </NavbarProvider>
+                </SidebarProvider>
+              </ScrollControllerProvider>
             </BaseSpecsProvider>
           </ColorModeProvider>
         </ModalProvider>

www/apps/api-reference/providers/sidebar.tsx

@@ -1,5 +1,9 @@
 "use client"
-import { SidebarProvider as UiSidebarProvider, usePageLoading } from "docs-ui"
+import {
+  SidebarProvider as UiSidebarProvider,
+  usePageLoading,
+  useScrollController,
+} from "docs-ui"
 
 type SidebarProviderProps = {
   children?: React.ReactNode
@@ -7,12 +11,14 @@ type SidebarProviderProps = {
 
 const SidebarProvider = ({ children }: SidebarProviderProps) => {
   const { isLoading, setIsLoading } = usePageLoading()
+  const { scrollableElement } = useScrollController()
 
   return (
     <UiSidebarProvider
       isLoading={isLoading}
       setIsLoading={setIsLoading}
       shouldHandleHashChange={true}
+      scrollableElement={scrollableElement}
       initialItems={{
         top: [
           {