Now with Partition Management
Wondering what’s next for npm?Check out our public roadmap! »

@threespot/freeze-scroll

1.0.3 • Public • Published

Freeze Scroll

npm Build Status Coverage Status

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();

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.

Threespot

Install

npm i @threespot/freeze-scroll

DownloadsWeekly Downloads

85

Version

1.0.3

License

MIT

Unpacked Size

1.72 MB

Total Files

59

Last publish

Collaborators

  • avatar
  • avatar
  • avatar