woocommerce-paypal-payments/modules/ppcp-settings/resources/js/hooks/useIsScrolled.js
2024-12-04 12:30:10 +01:00

44 lines
1.1 KiB
JavaScript

/**
* Taken from WooCommerce core:
* https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/client/admin/client/hooks/useIsScrolled.js
*/
import { useEffect, useRef, useState } from '@wordpress/element';
const isAtBottom = () =>
window.innerHeight + window.scrollY >= document.body.scrollHeight;
const useIsScrolled = () => {
const [ isScrolled, setIsScrolled ] = useState( false );
const [ atBottom, setAtBottom ] = useState( isAtBottom() );
const rafHandle = useRef( null );
useEffect( () => {
const updateIsScrolled = () => {
setIsScrolled( window.pageYOffset > 20 );
setAtBottom( isAtBottom() );
};
const scrollListener = () => {
rafHandle.current =
window.requestAnimationFrame( updateIsScrolled );
};
window.addEventListener( 'scroll', scrollListener );
window.addEventListener( 'resize', scrollListener );
return () => {
window.removeEventListener( 'scroll', scrollListener );
window.removeEventListener( 'resize', scrollListener );
window.cancelAnimationFrame( rafHandle.current );
};
}, [] );
return {
isScrolled,
atBottom,
atTop: ! isScrolled,
};
};
export default useIsScrolled;