phx-react
Version:
PHX REACT
41 lines • 1.56 kB
JavaScript
import { useEffect, useState } from 'react';
export function useHasScroll(ref, deps = []) {
const [hasVerticalScroll, setHasVerticalScroll] = useState(false);
const [hasHorizontalScroll, setHasHorizontalScroll] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el)
return;
const checkScroll = () => {
const style = window.getComputedStyle(el);
const canScrollY = style.overflowY === 'auto' || style.overflowY === 'scroll';
const canScrollX = style.overflowX === 'auto' || style.overflowX === 'scroll';
setHasVerticalScroll(canScrollY && el.scrollHeight > el.clientHeight);
setHasHorizontalScroll(canScrollX && el.scrollWidth > el.clientWidth);
};
checkScroll();
const resizeObserver = new ResizeObserver(() => {
checkScroll();
});
const mutationObserver = new MutationObserver(() => {
checkScroll();
});
resizeObserver.observe(el);
mutationObserver.observe(el, {
childList: true,
subtree: true,
characterData: true,
});
window.addEventListener('resize', checkScroll);
return () => {
resizeObserver.disconnect();
mutationObserver.disconnect();
window.removeEventListener('resize', checkScroll);
};
}, [ref, ...deps]);
return {
hasVerticalScroll,
hasHorizontalScroll,
};
}
//# sourceMappingURL=use-has-scroll.js.map