useScroll

Category

Sensors

Hook that allows you to control scroll a element

import { useScroll } from '@siberiacancode/reactuse';

Usage

const scrolling = useScroll(ref, options);
// or
const scrolling = useScroll(ref, () => console.log('callback'));
// or
const [ref, scrolling] = useScroll(options);
// or
const [ref, scrolling] = useScroll(() => console.log('callback'));

Demo

source

Api

Parameters

Name	Type	Default	Note
options.behavior?	ScrollBehavior	auto	The behavior of scrolling
options.offset.left?	number	0	The left offset for arrived states
options.offset.right?	number	0	The right offset for arrived states
options.offset.top?	number	0	The top offset for arrived states
options.offset.bottom?	number	0	The bottom offset for arrived states
options.onScroll?	(params: UseScrollCallbackParams, event: Event) => void	-	The callback function to be invoked on scroll
options.onStop?	(event: Event) => void	-	The callback function to be invoked on scroll end

Returns

boolean

Parameters

Name	Type	Default	Note
callback?	(params: UseScrollCallbackParams, event: Event) => void	-	The callback function to be invoked on scroll

Returns

boolean

Parameters

Name	Type	Default	Note
target	Target	-	The target element to scroll
options.behavior?	ScrollBehavior	auto	The behavior of scrolling
options.offset.left?	number	0	The left offset for arrived states
options.offset.right?	number	0	The right offset for arrived states
options.offset.top?	number	0	The top offset for arrived states
options.offset.bottom?	number	0	The bottom offset for arrived states
options.onScroll?	(params: UseScrollCallbackParams, event: Event) => void	-	The callback function to be invoked on scroll
options.onStop?	(event: Event) => void	-	The callback function to be invoked on scroll end

Returns

[StateRef<Target>, boolean]

Parameters

Name	Type	Default	Note
target	Target	-	The target element to scroll
callback?	(params: UseScrollCallbackParams, event: Event) => void	-	The callback function to be invoked on scroll

Returns

[StateRef<Target>, boolean]

Contributors

Source • Demo