2020-11-03 00:57:49 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { useEffect, useRef, useState } from '@wordpress/element';
|
|
|
|
|
|
|
|
export default function useIsScrolled() {
|
|
|
|
const [ isScrolled, setIsScrolled ] = useState( false );
|
|
|
|
const rafHandle = useRef( null );
|
|
|
|
useEffect( () => {
|
|
|
|
const updateIsScrolled = () => {
|
|
|
|
setIsScrolled( window.pageYOffset > 20 );
|
|
|
|
};
|
|
|
|
|
|
|
|
const scrollListener = () => {
|
2022-06-21 08:37:34 +00:00
|
|
|
rafHandle.current =
|
|
|
|
window.requestAnimationFrame( updateIsScrolled );
|
2020-11-03 00:57:49 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
window.addEventListener( 'scroll', scrollListener );
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
window.removeEventListener( 'scroll', scrollListener );
|
|
|
|
window.cancelAnimationFrame( rafHandle.current );
|
|
|
|
};
|
|
|
|
}, [] );
|
|
|
|
|
|
|
|
return isScrolled;
|
|
|
|
}
|