{"id":15626136,"url":"https://github.com/jossmac/react-scrolllock","last_synced_at":"2025-05-15T18:10:41.304Z","repository":{"id":38486437,"uuid":"72802690","full_name":"jossmac/react-scrolllock","owner":"jossmac","description":"🔒 Prevent scroll on the \u003cbody /\u003e","archived":false,"fork":false,"pushed_at":"2023-02-20T00:02:14.000Z","size":1663,"stargazers_count":462,"open_issues_count":37,"forks_count":43,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-11T06:06:18.218Z","etag":null,"topics":["component","react","scroll","scrolling"],"latest_commit_sha":null,"homepage":"https://jossmac.github.io/react-scrolllock","language":"JavaScript","has_issues":false,"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/jossmac.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-04T01:29:29.000Z","updated_at":"2025-05-04T08:31:40.000Z","dependencies_parsed_at":"2024-06-18T12:25:31.954Z","dependency_job_id":"9482d3a2-4b60-47cb-bc9a-605e2757c0bb","html_url":"https://github.com/jossmac/react-scrolllock","commit_stats":{"total_commits":78,"total_committers":16,"mean_commits":4.875,"dds":0.5769230769230769,"last_synced_commit":"b202d2273a33b0ec54d1d21d346aafe7a4b61d95"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jossmac%2Freact-scrolllock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jossmac%2Freact-scrolllock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jossmac%2Freact-scrolllock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jossmac%2Freact-scrolllock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jossmac","download_url":"https://codeload.github.com/jossmac/react-scrolllock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254394724,"owners_count":22063984,"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":["component","react","scroll","scrolling"],"created_at":"2024-10-03T10:10:53.799Z","updated_at":"2025-05-15T18:10:41.256Z","avatar_url":"https://github.com/jossmac.png","language":"JavaScript","readme":"🚨 Not Maintained\n=================\n\nThis was a great project to learn from and fulfilled the requirements it set out\nto. Unfortunately, I can no-longer give this project the time it needs. Consider\n[body-scroll-lock](https://github.com/willmcpo/body-scroll-lock) as an\nalternative.\n\n[![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/)\n\n---\n\n# React Scroll Lock\n\nPrevent scroll on the `\u003cbody /\u003e` when a component is mounted.\n\n## Install\n\n```bash\nyarn add react-scrolllock\n```\n\n## Usage\n\n```js\nimport ScrollLock, { TouchScrollable } from 'react-scrolllock';\n\nclass Modal extends Component {\n  state = { lockScroll: false }\n  render() {\n    return (\n      \u003cdiv\u003e\n        ...\n        // the lock accepts a single child element, which supports touch-scrolling.\n        \u003cScrollLock\u003e\n          \u003cElementWithScrollableContent\u003e...\u003c/ElementWithScrollableContent\u003e\n        \u003c/ScrollLock\u003e\n\n        // if your app structure doesn't allow wrapping like above, the `TouchScrollable`\n        // component is exposed as a named export.\n        \u003cScrollLock /\u003e\n        \u003cTouchScrollable\u003e\n          \u003cElementWithScrollableContent\u003e...\u003c/ElementWithScrollableContent\u003e\n        \u003c/TouchScrollable\u003e\n\n        // you can also toggle the lock based on some state.\n        \u003cScrollLock isActive={this.state.lockScroll} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n## Props\n\n#### ScrollLock\n\n| Property                       | Description                                                                    |\n| :----------------------------- | :----------------------------------------------------------------------------- |\n| accountForScrollbars `boolean` | Default: `true` -- Whether or not to replace the scrollbar width when active. |\n| isActive `boolean` | Default: `true` -- Whether or not the lock is active. |\n| children `element` | Default: `null` -- This element is wrapped internally by the TouchScrollable component. |\n\n#### TouchScrollable\n\nWrap an element in the `TouchScrollable` component if you need an area that supports scroll on mobile.\n\nThis is necessary because the `touchmove` event is explicitly cancelled \u0026mdash; iOS doesn't observe `overflow: hidden;` when applied to the `\u003cbody /\u003e` element 😢\n\n| Property                 | Description                                    |\n| :----------------------- | :--------------------------------------------- |\n| children `element` | `ref =\u003e element` | **Required** The element that can be scrolled. |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjossmac%2Freact-scrolllock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjossmac%2Freact-scrolllock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjossmac%2Freact-scrolllock/lists"}