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.
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();
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.
On some mobile browsers you may see a quick jump while applying on/off.
##License The MIT License (MIT)
Copyright (c) 2015 Krzysztof Rusnarczyk