ScrollSpy
UtilityStable
Scroll position tracker that highlights navigation based on which section is in view. Updates browser hash on scroll.
Quick Import
import { ScrollSpy } from "@cohere-ai/waypoint-ui/scroll-spy";Live Preview
Loading ScrollSpy...
Props
| Name | Type | Default | Description |
|---|---|---|---|
targetRef | React.RefObject | - | Container element to spy on |
onUpdate | function | - | Callback with active section ID |
offset | number | 0 | Offset from top for activation |
smooth | boolean | true | Smooth scroll on click |
dataAttribute | string | 'scrollspy' | Data attribute name for anchors |
history | boolean | true | Updates browser hash on scroll |
defaultValue | string | - | Default active section |
Examples
Scroll Spy
Track active section as user scrolls through content
1 import { ScrollSpy } from '@cohere-ai/waypoint-ui/scroll-spy'; 2 3 <ScrollSpy 4 targetRef={containerRef} 5 onUpdate={(activeId) => setActiveSection(activeId)} 6 offset={80} 7 />
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the ScrollSpy component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.