A simple body no-scroll plugin for modals and overlays
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
bns.js

README.md

Body no-scroll

Sometimes you are so annoyed with browsers non-standard behaviours that you write a JS plugin. This simple piece of code blocks the scrolling of body while opening modals or overlays. It also saves scroll position.

Use

Include the plugin file (bns.js). To turn no-scroll on/off use these methods.

BNS.on(); // I just opened a modal and want background to be non-scrollable
BNS.off(); // Okay, back to standard view

You can also apply your own classes to body each time you call on/off.

BNS.set({
	classes: 'one two three'
});

BNS.on(); // Now body has classes 'one two three'
BNS.off(); // Classes removed

In some cases you may want to add classes to body just for specific calls.

BNS.on('classname'); // Now body has class 'classname' and classes added by set method

To check if BNS is currently on.

BNS.isOn();

Browser support

Tested and working:

  • Firefox,
  • Chrome/Chromium,
  • Opera (on Presto),
  • Opera (on Blink),
  • IE (11, 10, 9),
  • Safari,
  • BlackBerry Browser (Webkit).

I would really appreciate feedback from Android and iOS browsers.

Known issues

On some mobile browsers you may see a quick jump while applying on/off.

About the author

##License The MIT License (MIT)

Copyright (c) 2015 Krzysztof Rusnarczyk