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

Note: Once Safari and iOS Safari support the “touch-action” CSS property (, we can simply toggle a class that adds the following:

  .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; }


yarn add @threespot/freeze-scroll


import scroll from "@threespot/freeze-scroll";

// Disable scrolling

// Enable scrolling

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.


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


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