useScrollLock

Lock and unlock scrolling on a target element or document.body. Useful for modals, drawers, and overlays that need to prevent background scrolling.

Demo

useScrollLock

Lock and unlock page scrolling. Try scrolling the page after locking.

Unlocked

Lock scroll

Usage

Hook

import { useScrollLock } from "@usels/web";

function Component() {
  const { isLocked$, lock, unlock, toggle } = useScrollLock();

  return (
    <div>
      <p>Scroll is {isLocked$.get() ? "locked" : "unlocked"}</p>
      <button onClick={toggle}>Toggle scroll lock</button>
    </div>
  );
}

Scope

import { createScrollLock } from "@usels/web";

function Component() {
  "use scope"
  const { isLocked$, toggle } = createScrollLock();

  return (
    <div>
      <p>Scroll is {isLocked$.get() ? "locked" : "unlocked"}</p>
      <button onClick={toggle}>Toggle scroll lock</button>
    </div>
  );
}

With target element

By default, scroll lock is applied to document.body. Pass any element via the first argument to scope locking to that element.

// @noErrors
import { useRef$ } from "@usels/core";
import { useScrollLock } from "@usels/web";

function Component() {
  const el$ = useRef$<HTMLDivElement>();
  const { isLocked$, toggle } = useScrollLock(el$);

  return (
    <div ref={el$} style={{ overflow: "auto", height: 300 }}>
      <button onClick={toggle}>{isLocked$.get() ? "Unlock" : "Lock"} scroll</button>
      {/* long content */}
    </div>
  );
}

Initial locked state

Pass true as the second argument to start with scrolling locked on mount.

// @noErrors
import { useScrollLock } from "@usels/web";
// ---cut---
const { isLocked$, unlock } = useScrollLock(undefined, true);
// scrolling is locked immediately on mount

Reactive control

Pass an Observable as initialState to seed the lock state reactively.

// @noErrors
import { observable } from "@usels/core";
import { useScrollLock } from "@usels/web";
// ---cut---
const locked$ = observable(false);
const { isLocked$ } = useScrollLock(undefined, locked$);

Type

Parameters

Parameter	Type	Description
element	MaybeEventTarget<HTMLElement> (optional)	-
initialState	MaybeObservable<boolean> | undefined (optional)	-
options	ConfigurableWindow (optional)	-

Returns

UseScrollLockReturn

Name	Type	Description
isLocked$	ObservableBoolean<boolean>	Current scroll lock state
lock	() => void	Lock scrolling
unlock	() => void	Unlock scrolling
toggle	() => void	Toggle lock state

Source

View on GitHub