Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 1x 1x 110x 110x 110x 110x 110x 60x 60x 9x 4x 4x 1x 1x 1x 3x 3x 3x 4x 2x 2x 4x 9x 9x 110x 110x | import { useEffect } from 'react';
interface UseContainedWheelScrollOptions {
enabled: boolean;
containerRef: React.RefObject<HTMLElement | null>;
scrollableSelector?: string;
}
/**
* Lets the page keep scrolling while the pointer is over a popover with its
* own internal scroll area, only hijacking the wheel event once that inner
* area has room left to scroll (i.e. hasn't hit its top/bottom edge).
*/
export const useContainedWheelScroll = ({
enabled,
containerRef,
scrollableSelector = '.epr-body',
}: UseContainedWheelScrollOptions) => {
useEffect(() => {
const container = containerRef.current;
if (!enabled || !container) return;
const handleWheel = (event: WheelEvent) => {
const body = container.querySelector<HTMLElement>(scrollableSelector);
if (!body) {
window.scrollBy(0, event.deltaY);
return;
}
const { scrollTop, scrollHeight, clientHeight } = body;
const atTop = scrollTop <= 0;
const atBottom = scrollTop + clientHeight >= scrollHeight - 1;
if ((event.deltaY < 0 && atTop) || (event.deltaY > 0 && atBottom)) {
window.scrollBy(0, event.deltaY);
}
};
container.addEventListener('wheel', handleWheel, { passive: true });
return () => container.removeEventListener('wheel', handleWheel);
}, [enabled, containerRef, scrollableSelector]);
};
|