prevent-page-scroll.jsx

import { useCallback } from 'react';

export const usePreventPageScroll = () => {
  const enable = useCallback(() => {
    // Prevent scrolling
    document.body.style.position = 'fixed';
    document.body.style.top = `-${window.scrollY}px`;
  }, []);

  const disable = useCallback(() => {
    // Re-enable scrolling
    document.body.style.position = '';
    document.body.style.top = '';
    window.scrollTo(0, parseInt(window.getComputedStyle(document.body).top || '0', 10) * -1);
  }, []);

  return {
    enable,
    disable,
  };
};

const onModalOpened = useCallback(() => {
  if (onOpened) {
    onOpened();
  }

  if (scrollable) {
    scrollEnable();
  }

  document.body.classList.add(MODAL_SHOWN_CLASS);
}, [onOpened, scrollable, scrollEnable]);

const onModalClosed = useCallback(() => {
  if (onClosed) {
    onClosed();
  }

  if (scrollable) {
    scrollDisable();
  }

  document.body.classList.remove(MODAL_SHOWN_CLASS);
}, [onClosed, scrollable, scrollDisable]);