@hunterliu/scroll-lock

Guide

Complete guide to using @hunterliu/scroll-lock for preventing unwanted scrolling in web applications.

Installation

sh

npm install @hunterliu/scroll-lock

Quick Start

The simplest way to lock and unlock scrolling:

ts

import {
  lockScroll,
  unlockScroll,
  isScrollLocked,
} from "@hunterliu/scroll-lock";

lockScroll(document.body);

console.log(isScrollLocked(document.body)); // true

unlockScroll(document.body);

Basic Examples

Locking Body Scroll

IsLocked: false

Target: <Body>

Locking Custom Element Scroll

IsLocked: false

Current Lock Count: 0

I'm sticky

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid aspernatur blanditiis consectetur dolorem earum eligendi, hic illum impedit ipsam labore molestiae odit quas quia rem repellat sed sint voluptate!

Clear All Locks

Locked Elements:None

For complete API documentation, see the API Reference.