use-scroll-into-view handles scroll behavior for any scrollable element. Basic usage works the same way as
Hook adjusts scrolling animation with respect to the
reduced-motion user preference.
Hook is configured with settings object:
onScrollFinish– function that will be called after scroll animation
easing– custom math easing function
duration- duration of scroll animation in milliseconds
axis- axis of scroll
cancelable- indicator if animation may be interrupted by user scrolling
offset- additional distance between nearest edge and element
isList- indicator that prevents content jumping in scrolling lists with multiple targets eg. Select, Carousel
Hook returns an object with:
scrollIntoView– function that starts scroll animation
cancel– function that stops scroll animation
targetRef- ref of target HTML node
scrollableRef- ref of scrollable parent HTML element, if not used document element will be used
scrollIntoView function accepts single optional argument
alignment - optional target element alignment relatively to parent based on current axis.
Hook accept custom
easing math function to control the flow of animation.
t argument which is a number between