{"id":18734324,"url":"https://github.com/threespot/freeze-scroll","last_synced_at":"2025-04-12T18:32:12.470Z","repository":{"id":57166395,"uuid":"127189708","full_name":"Threespot/freeze-scroll","owner":"Threespot","description":"Prevent scrolling the body element (e.g. when a modal window is open)","archived":false,"fork":false,"pushed_at":"2020-09-04T20:21:28.000Z","size":605,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-11T00:02:37.101Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://threespot.github.io/freeze-scroll/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Threespot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-28T19:41:57.000Z","updated_at":"2019-11-21T23:21:56.000Z","dependencies_parsed_at":"2022-08-30T15:20:50.799Z","dependency_job_id":null,"html_url":"https://github.com/Threespot/freeze-scroll","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Threespot%2Ffreeze-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Threespot%2Ffreeze-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Threespot%2Ffreeze-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Threespot%2Ffreeze-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Threespot","download_url":"https://codeload.github.com/Threespot/freeze-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248613649,"owners_count":21133562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T15:13:01.939Z","updated_at":"2025-04-12T18:32:12.136Z","avatar_url":"https://github.com/Threespot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Freeze Scroll\n\n[![npm](https://badge.fury.io/js/%40threespot%2Ffreeze-scroll.svg)](https://www.npmjs.com/package/@threespot/freeze-scroll)\n[![Build Status](https://travis-ci.org/Threespot/freeze-scroll.svg?branch=master)](https://travis-ci.org/Threespot/freeze-scroll)\n[![Coverage Status](https://coveralls.io/repos/github/Threespot/freeze-scroll/badge.svg)](https://coveralls.io/github/Threespot/freeze-scroll)\n\nThis 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.\n\nInspired by https://benfrain.com/preventing-body-scroll-for-modals-in-ios/\n\nNote: Once Safari and iOS Safari support the “touch-action” CSS property ([caniuse.com](https://caniuse.com/#feat=css-touch-action)), we can simply toggle a class that adds the following:\n```css\n  .js-no-scroll,\n  .js-no-scroll body {\n    overflow: hidden;\n    touch-action: none;\n  }\n\n  /* Create class to allow scrolling on certain elements, like modal windows */\n  .allow-scroll { touch-action: auto !important; }\n```\n\n## Install\n\n```bash\nyarn add @threespot/freeze-scroll\n```\n\n## Usage\n\n```js\nimport scroll from \"@threespot/freeze-scroll\";\n\n// Disable scrolling\nscroll.freeze();\n\n// Enable scrolling\nscroll.unfreeze();\n```\n\n**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 `\u003chtml\u003e` element.\n\nExample:\n```js\nwindow.addEventListener('scroll', () =\u003e {\n  // Ignore scroll events trigger by freeze-scroll\n  if (document.documentElement.classList.contains('js-no-scroll')) {\n    return false;\n  }\n\n  // continue with your scroll event handler code\n});\n```\n\n## License\n\nThis is free software and may be redistributed under the terms of the [MIT license](https://github.com/Threespot/freeze-scroll/blob/master/LICENSE.md).\n\n## About Threespot\n\nThreespot 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](https://www.threespot.com).\n\n[![Threespot](https://avatars3.githubusercontent.com/u/370822?v=3\u0026s=100)](https://www.threespot.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthreespot%2Ffreeze-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthreespot%2Ffreeze-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthreespot%2Ffreeze-scroll/lists"}