ENGLISH·COURSE API
    Preparing search index...
    • Client hook: scrolls a region so the row it marks with aria-current="page" sits in the middle of its visible area.

      Type Parameters

      • TRegion extends HTMLElement

      Parameters

      • isActive: boolean

        Whether the region is laid out and worth measuring

      Returns RefObject<TRegion | null>

      A ref to attach to the scrollable region

      Attach the returned ref to the scrollable region — not to the row. The hook finds the row itself, measures both, and writes the region's scrollTop once, before paint.

      It deliberately does not use Element.scrollIntoView(). That method scrolls every scrollable ancestor, including the document, which on a page whose only other scroll container is the document would drag the reader away from the content they just opened. Assigning scrollTop moves exactly one element and nothing above it.

      The adjustment is instant for everyone — there is no smooth-scroll branch and therefore nothing for prefers-reduced-motion to suppress. The region should read as having always been in the right place.

      isActive exists for regions that have no layout until the reader opens them, such as the contents of a closed <details>: measuring one of those at mount yields zeroes. Pass the region's open state and the hook measures when it turns true. A region that is visible from the start passes true.

      Nothing happens when the region is absent or holds no current row — the region keeps whatever offset it has.

      const outlineRef = useScrollCurrentIntoView<HTMLElement>(true);
      return <aside ref={outlineRef} className="overflow-y-auto">{outline}</aside>;