phx-react
Version:
PHX REACT
44 lines • 1.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useHasScroll = useHasScroll;
const react_1 = require("react");
function useHasScroll(ref, deps = []) {
const [hasVerticalScroll, setHasVerticalScroll] = (0, react_1.useState)(false);
const [hasHorizontalScroll, setHasHorizontalScroll] = (0, react_1.useState)(false);
(0, react_1.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