@redocly/theme/src/core/hooks/use-modal-scroll-lock.ts

Shared UI components lib

import { useEffect } from 'react';

export function useModalScrollLock(isOpen: boolean) {
  useEffect(() => {
    const originalOverflow = document.body.style.overflow;
    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

    if (isOpen) {
      document.body.style.overflow = 'hidden';
      document.body.style.marginRight = `${scrollbarWidth}px`;
    } else {
      document.body.style.overflow = originalOverflow;
      document.body.style.marginRight = '';
    }

    return () => {
      document.body.style.overflow = originalOverflow;
      document.body.style.marginRight = '';
    };
  }, [isOpen]);
}