body-scroll-freezer

Dependency-free JS module to freeze body scroll when opening modal box

1.0.5

latest

Source

npm

Version published: 8 years ago

Weekly downloads: 104

Maintainers: 1

Weekly downloads

Created: 9 years ago

Source

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.

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 as an example.

The problem is that most of those DOM operations (.scrollTop and .scrollHeight, for example) are expensive because they force layout/reflow. For more info on scrolling performance check out this article.

So, to avoid all that, body-scroll-freezer just assigns overflow: hidden; and padding-right: [scrollWidth]px; to the <body>. 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

// If no AMD/CommonJS: window.bodyScrollFreezer;
var bodyScroll = require('body-scroll-freezer');

1. Init to calculate scroll bar width.

// Note: declaring variable to store init() return is optional.
var scrollWidth = bodyScroll.init();

2. Turn scroll freeze ON when closing modal. Example:

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:

document.querySelector('.modal-close').addEventListener('click', function() {
  // Logic to hide modal goes here
  bodyScroll.unfreeze();
}, false);

FAQs

What is body-scroll-freezer?

Is body-scroll-freezer popular?

Is body-scroll-freezer well maintained?

Package last updated on 10 Mar 2017

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.

Install