https://github.com/ramonvictor/body-scroll-freezer
↕️ Dependency-free JS module to freeze body scroll when opening modal box
https://github.com/ramonvictor/body-scroll-freezer
lightbox microlib modal scrolling
Last synced: 3 months ago
JSON representation
↕️ Dependency-free JS module to freeze body scroll when opening modal box
- Host: GitHub
- URL: https://github.com/ramonvictor/body-scroll-freezer
- Owner: ramonvictor
- Created: 2017-01-15T13:26:00.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-26T18:57:57.000Z (about 7 years ago)
- Last Synced: 2025-03-08T11:23:53.967Z (3 months ago)
- Topics: lightbox, microlib, modal, scrolling
- Language: JavaScript
- Homepage:
- Size: 32.2 KB
- Stars: 24
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# body-scroll-freezer
[](https://badge.fury.io/js/body-scroll-freezer)
Dependency-free JS module to freeze body scroll when opening modal box.
Useful for modal, sliding-panel and lightbox interfaces.
> <1kb [minified](https://raw.githubusercontent.com/ramonvictor/body-scroll-freezer/master/docs/js/body-scroll-freezer.min.js).
## How to install?
```
$ npm i body-scroll-freezer
```
## A note on performance
Many other alternatives to this module listen to both `mousewheel` and `DOMMouseScroll` events in order to get some information from the DOM, which usually includes: `Element.scrollTop`, `event.deltaY`, `Element.scrollHeight` or `Element.clientHeight`. Check this [StackOverflow answer](http://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element#answer-16324762) as an example.
The problem is that most of those DOM operations (`.scrollTop` and `.scrollHeight`, for example) are expensive because they [force layout/reflow](https://gist.github.com/paulirish/5d52fb081b3570c81e3a). For more info on scrolling performance [check out this article](https://www.html5rocks.com/en/tutorials/speed/scrolling/).
So, to avoid all that, **body-scroll-freezer** just assigns `overflow: hidden;` and `padding-right: [scrollWidth]px;` to the ``.
The `overflow` avoids vertical move on the background when users are scrolling within the modal box. The `padding-right` prevents horizontal jumps when hiding/showing the scrollbar.
## Usage
```js
// If no AMD/CommonJS: window.bodyScrollFreezer;
var bodyScroll = require('body-scroll-freezer');
```
1\. Init to calculate scroll bar width.
```js
// Note: declaring variable to store init() return is optional.
var scrollWidth = bodyScroll.init();
```
2\. Turn scroll freeze **ON** when closing modal. Example:
```js
document.querySelector('.modal-open').addEventListener('click', function() {
// Logic to show modal goes here
bodyScroll.freeze();
}, false);
```
3\. Turn scroll freeze **OFF** when closing modal. Example:
```js
document.querySelector('.modal-close').addEventListener('click', function() {
// Logic to hide modal goes here
bodyScroll.unfreeze();
}, false);
```