Scrolls given element into view
The use-scroll-into-view hook handles scroll behavior for any scrollable element. Basic usage works the same way as element.scrollIntoView() . The hook adjusts the scrolling animation with respect to the reduced-motion user preference.
The hook is configured with a settings object:
The hook returns an object with:
The returned scrollIntoView function accepts a single optional argument alignment - optional target element alignment relative to the parent based on the current axis.
The hook accept custom easing math function to control the flow of animation. It takes t argument, which is a number between 0 and 1 .
Default easing is easeInOutQuad - more info here . You can find other popular examples on easings.net
UseScrollIntoViewOptions and UseScrollIntoViewReturnValue types are exported from the @mantine/hooks package; you can import them in your application: