# willmcpo/body-scroll-lock

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/willmcpo-body-scroll-lock).**

_How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._

4,099 stars · 327 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/willmcpo/body-scroll-lock
- awesome-repositories: https://awesome-repositories.com/repository/willmcpo-body-scroll-lock.md

## Topics

`angular` `body-scroll` `body-scroll-lock` `bsl` `chrome` `freeze` `ios` `lightbox` `lock` `mobile` `modal` `overflow` `react` `react-scroll-lock` `react-scrolllock` `safari` `scroll-lock` `toggle` `vanilla-js` `vuejs`

## Description

body-scroll-lock is a DOM scroll locking library and cross-browser scroll controller. It provides utilities to disable page scrolling while maintaining scrollability for specific nested elements across different browsers and devices.

The project functions as a layout shift prevention utility and a web UI modal scroll manager. It includes mechanisms to add padding to the body when scrollbars are removed to prevent horizontal flickering and content shifting.

The library covers scroll management for mobile navigation and modal interactions, enabling specific containers to remain scrollable while the rest of the document body is frozen.

## Tags

### User Interface & Experience

- [Viewport Scroll Locking](https://awesome-repositories.com/f/user-interface-experience/overflow-scroll-management/viewport-scroll-locking.md) — Disables page scrolling by applying overflow hidden to the body while maintaining the current scroll position.
- [Scrollbar-Induced Shift Prevention](https://awesome-repositories.com/f/user-interface-experience/cumulative-layout-shift-prevention/scrollbar-induced-shift-prevention.md) — Prevents horizontal content flickering by adding body padding when scrollbars disappear.
- [Nested Scroll Coordination](https://awesome-repositories.com/f/user-interface-experience/scroll-areas/scroll-orchestrators/nested-scroll-coordination.md) — Enables specific nested containers to remain scrollable while the main document body is frozen.
- [Nested Scroll Event Frameworks](https://awesome-repositories.com/f/user-interface-experience/scroll-event-handlers/nested-scroll-event-frameworks.md) — Provides a framework for coordinating and intercepting scroll events between the locked body and nested scrollable containers.
- [Scroll Locking](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-restoration/scroll-locking.md) — Provides utilities for disabling document scrolling specifically during modal or overlay display.
- [Scrollbar Gutter Compensation](https://awesome-repositories.com/f/user-interface-experience/scrollbars/scrollbar-gutter-compensation.md) — Prevents horizontal layout shift by adding padding to the body when the scrollbar is removed.
- [Touch Event Interception](https://awesome-repositories.com/f/user-interface-experience/touch-event-interception.md) — Intercepts and blocks touch events on mobile devices to prevent background scrolling.
- [Cumulative Layout Shift Prevention](https://awesome-repositories.com/f/user-interface-experience/cumulative-layout-shift-prevention.md) — Prevents horizontal flickering and content shifting when the scrollbar is removed. ([source](https://github.com/willmcpo/body-scroll-lock/blob/master/README.md))
- [Layout Stabilization](https://awesome-repositories.com/f/user-interface-experience/frontend-ui-optimization/layout-stabilization.md) — Prevents horizontal layout shifts and visual flickering when the browser scrollbar is removed.
- [Modal Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs/modal-overlays.md) — Manages scroll behavior for full-screen overlays and modal windows.
- [Scroll-Lock Offset Compensation](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-restoration/scroll-position-maintenance/fixed-element-offsets/scroll-lock-offset-compensation.md) — Implements fixed positioning and top offset calculations to prevent content jumping during scroll locks.

### Mobile Development

- [Mobile Web Navigation Menus](https://awesome-repositories.com/f/mobile-development/mobile-web-navigation-menus.md) — Ensures background stability when mobile navigation menus are active.