Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@types/body-scroll-lock
Advanced tools
TypeScript definitions for 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.
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();
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 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 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.
npm install --save @types/body-scroll-lock
This package contains type definitions for body-scroll-lock (https://github.com/willmcpo/body-scroll-lock).
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/body-scroll-lock.
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;
These definitions were written by kimcoder.
FAQs
TypeScript definitions for body-scroll-lock
We found that @types/body-scroll-lock demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.