Skip to main content

useScrollLock()

Locks or unlocks the document body scroll. Ideal for modals, sidebars, or other UI elements that require disabling background scrolling in React applications.

Import​

import { useScrollLock } from "reactuals";

Demo​

Loading...

Usage​

import { useScrollLock } from "reactuals";

function ScrollLockDemo() {
  const { locked, toggle } = useScrollLock();

  return (
    <div className="p-4">
      <button onClick={toggle} className="p-2 bg-blue-500 text-white rounded">
        {locked ? "Unlock Scroll" : "Lock Scroll"}
      </button>
      <p className="mt-4">Scroll is {locked ? "locked" : "unlocked"}.</p>
    </div>
  );
}