Function usePreventDocumentScrolling

Custom React hook to prevent document scrolling.

This hook adds a CSS class to the document's root element to disable scrolling when isPrevented is true. It creates a style element with the necessary CSS rules and manages its lifecycle based on the value of isPrevented.

Example

const MyComponent = () => {
  const [isScrollingDisabled, setScrollingDisabled] = useState(false);

  usePreventDocumentScrolling(isScrollingDisabled);

  return (
    <div>
      <button onClick={() => setScrollingDisabled(!isScrollingDisabled)}>
        {isScrollingDisabled ? 'Enable Scrolling' : 'Disable Scrolling'}
      </button>
    </div>
  );
};