Freeze Scroll
This script provides a cross-browser way of preventing scroll on the body element. A common use case for this is when a modal window is open. Without this script, it’s easy for users to unknowingly scroll the page behind the modal and be disoriented when it’s closed.
Inspired by https://benfrain.com/preventing-body-scroll-for-modals-in-ios/
Note: Once Safari and iOS Safari support the “touch-action” CSS property (caniuse.com), we can simply toggle a class that adds the following:
.js-no-scroll,
.js-no-scroll body {
overflow: hidden;
touch-action: none;
}
/* Create class to allow scrolling on certain elements, like modal windows */
.allow-scroll { touch-action: auto !important; }
Install
yarn add @threespot/freeze-scroll
Usage
import scroll from "@threespot/freeze-scroll";
// Disable scrolling
scroll.freeze();
// Enable scrolling
scroll.unfreeze();
NOTE: Calling freeze()
or unfreeze()
will trigger a scroll event. If you have other scroll event listeners, you may want to ignore this event by checking for the js-no-scroll
class on the <html>
element.
Example:
window.addEventListener('scroll', () => {
// Ignore scroll events trigger by freeze-scroll
if (document.documentElement.classList.contains('js-no-scroll')) {
return false;
}
// continue with your scroll event handler code
});
License
This is free software and may be redistributed under the terms of the MIT license.
About Threespot
Threespot is an independent digital agency hell-bent on helping those, and only those, who are committed to helping others. Find out more at https://www.threespot.com.