Scroll spy
useAbScrollSpy, scrollToAbSection, and the main-scroller helper from components.
- Packages
- ab-nextjs-hooks
- Client Component
- Stable
These tables are useAbScrollSpy, scrollToAbSection, their options, and the two root-margin constants. getAbMainScroller and AB_MAIN_SCROLLER_SELECTOR are documented here too, and they are exported from ab-nextjs-components/ab-toc, not from core. This page is not the whole hooks package.
UseAbScrollSpyOptions
ab-nextjs-hooks/useAbScrollSpy
| Name | Type | Default | Description |
|---|---|---|---|
rootMargin | string | undefined | unknown | 📏 IntersectionObserver rootMargin. Default: AB_SCROLL_SPY_ROOT_MARGIN for the window (64px sticky bar), AB_SCROLL_SPY_PANE_ROOT_MARGIN when root is set (a pane has no bar inside it). |
threshold | number | number[] | undefined | 0 | 🎚️ IntersectionObserver threshold (default 0). |
root | Element | null | undefined | null | 🪟 scroll container (default: the viewport). With core 0.1.6 panes pass useAbPage().mainScrollElement (G55). |
lastAtBottom | boolean | undefined | true | 🔚 at the bottom of the root the **last** id wins, even if it can't reach the top (default true). |
enabled | boolean | undefined | true | 🔌 turn the spy off without unmounting (default true). |
initialId | string | null | undefined | unknown | 🧭 id to report before anything intersects (default: the first id). |
useAbScrollSpy
ab-nextjs-hooks/useAbScrollSpy
useAbScrollSpy(ids: readonly string[], options: UseAbScrollSpyOptions = {}): string | null| Name | Type | Default | Description |
|---|---|---|---|
idsRequired | readonly string[] | No default | |
options | UseAbScrollSpyOptions | {} |
ScrollToAbSectionOptions
ab-nextjs-hooks/useAbScrollSpy
| Name | Type | Default | Description |
|---|---|---|---|
offset | number | undefined | 0 | 📏 pixels to leave above the section (e.g. the sticky app bar height). Default 0. |
container | Element | null | undefined | null | 📜 the scroll container (e.g. useAbPage().mainScrollElement, the panes main, G55). Default: the window. Effective fallback when omitted: null. Not a declared initializer. |
rootDeprecated: 0.1.7: use container (same thing; kept as an alias). | Element | null | undefined | null | Effective fallback when omitted: null. Not a declared initializer. Alias of container. |
updateHash | boolean | undefined | true | 🔗 also update the URL hash with history.replaceState (no jump). Default true. |
scrollToAbSection
ab-nextjs-hooks/useAbScrollSpy
scrollToAbSection(id: string, options: ScrollToAbSectionOptions = {}): boolean| Name | Type | Default | Description |
|---|---|---|---|
idRequired | string | No default | |
options | ScrollToAbSectionOptions | {} |
AB_SCROLL_SPY_ROOT_MARGIN
ab-nextjs-hooks/useAbScrollSpy
"-64px 0px -60% 0px"
'-64px 0px -60% 0px'AB_SCROLL_SPY_PANE_ROOT_MARGIN
ab-nextjs-hooks/useAbScrollSpy
"0px 0px -60% 0px"
'0px 0px -60% 0px'getAbMainScroller
ab-nextjs-components/ab-toc Exported from ab-nextjs-components/ab-toc. It is not a core export.
getAbMainScroller(from?: Element | null): HTMLElement | null| Name | Type | Default | Description |
|---|---|---|---|
from | Element | null | No default |
AB_MAIN_SCROLLER_SELECTOR
ab-nextjs-components/ab-toc The selector getAbMainScroller reads. Also from ab-nextjs-components/ab-toc, not core.
"[data-ab-part=\"main-content\"]"
'[data-ab-part="main-content"]'Not on this page
AbToc(ab-nextjs-components/ab-toc) — Outline chrome. This pass only documents getAbMainScroller and its selector from this entry.AbTocItem(ab-nextjs-components/ab-toc) — Outline item shape, not the scroller helper.AbTocPromo(ab-nextjs-components/ab-toc) — Aside promo card, not the scroller helper.AbTocPromoProps(ab-nextjs-components/ab-toc) — Outline promo props. This pass only documents getAbMainScroller and its selector from this entry.AbTocProps(ab-nextjs-components/ab-toc) — Outline chrome, not the scroller helper.