@types/body-scroll-lock

What is @types/body-scroll-lock?

@types/body-scroll-lock provides TypeScript definitions for the body-scroll-lock library, which is used to prevent or allow scrolling on the body element of a webpage. This is particularly useful for modals, sidebars, and other UI elements that require the background content to be non-scrollable while they are open.

What are @types/body-scroll-lock's main functionalities?

Lock Body Scroll

This feature allows you to disable scrolling on the body element when a specific target element (e.g., a modal) is open. The code sample demonstrates how to import the `disableBodyScroll` function and apply it to a target element.

import { disableBodyScroll } from 'body-scroll-lock';

const targetElement = document.querySelector('#modal');
disableBodyScroll(targetElement);

Unlock Body Scroll

This feature allows you to re-enable scrolling on the body element when the specific target element (e.g., a modal) is closed. The code sample demonstrates how to import the `enableBodyScroll` function and apply it to a target element.

import { enableBodyScroll } from 'body-scroll-lock';

const targetElement = document.querySelector('#modal');
enableBodyScroll(targetElement);

Clear All Body Scroll Locks

This feature allows you to clear all scroll locks that have been applied to the body element. The code sample demonstrates how to import the `clearAllBodyScrollLocks` function and call it to remove all scroll locks.

import { clearAllBodyScrollLocks } from 'body-scroll-lock';

clearAllBodyScrollLocks();

Other packages similar to @types/body-scroll-lock

react-modal

react-modal is a popular package for creating accessible modal dialogs in React applications. It includes built-in functionality to lock body scroll when the modal is open, similar to what body-scroll-lock provides. However, react-modal is specifically designed for React, whereas body-scroll-lock can be used in any JavaScript environment.

react-scrolllock

react-scrolllock is another React-specific package that provides a component to lock scrolling on the body element. It offers similar functionality to body-scroll-lock but is tailored for use in React applications, making it easier to integrate with React components.

no-scroll

no-scroll is a lightweight package that provides simple functions to disable and enable scrolling on the body element. It offers similar functionality to body-scroll-lock but with a smaller footprint and fewer features.

README

Installation

npm install --save @types/body-scroll-lock

Summary

This package contains type definitions for body-scroll-lock (https://github.com/willmcpo/body-scroll-lock).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/body-scroll-lock.

index.d.ts

export interface BodyScrollOptions {
    reserveScrollBarGap?: boolean | undefined;
    allowTouchMove?: ((el: HTMLElement | Element) => boolean) | undefined;
}

export function disableBodyScroll(targetElement: HTMLElement | Element, options?: BodyScrollOptions): void;
export function enableBodyScroll(targetElement: HTMLElement | Element): void;
export function clearAllBodyScrollLocks(): void;

export as namespace bodyScrollLock;

Additional Details

• Last updated: Mon, 06 Nov 2023 22:41:05 GMT
• Dependencies: none

Credits

These definitions were written by kimcoder.