{"id":19451276,"url":"https://github.com/thekashey/react-scroll-locky","last_synced_at":"2025-04-25T04:30:24.095Z","repository":{"id":57344238,"uuid":"141136379","full_name":"theKashey/react-scroll-locky","owner":"theKashey","description":"📜🔒 – React full-cream \"anti-scroll\" library, you were looking for","archived":false,"fork":false,"pushed_at":"2019-09-20T22:03:41.000Z","size":235,"stargazers_count":57,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T00:49:25.647Z","etag":null,"topics":["body-scroll","react","scrollbar","scrolling"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theKashey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-16T12:35:41.000Z","updated_at":"2024-03-21T17:58:51.000Z","dependencies_parsed_at":"2022-09-11T09:00:50.442Z","dependency_job_id":null,"html_url":"https://github.com/theKashey/react-scroll-locky","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-scroll-locky","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-scroll-locky/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-scroll-locky/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-scroll-locky/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theKashey","download_url":"https://codeload.github.com/theKashey/react-scroll-locky/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250754501,"owners_count":21481823,"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":["body-scroll","react","scrollbar","scrolling"],"created_at":"2024-11-10T16:41:04.099Z","updated_at":"2025-04-25T04:30:23.807Z","avatar_url":"https://github.com/theKashey.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e 💀 react-scroll-locky was replaced by [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) 💀 \n\n# 📜🔒 react-scroll-locky \n----\n📜 Prevents page from being scrolled. Or any other \"not permitted\" container.\n\n💡 Hides scrollbars, preserving page width.\n\n🤘 Works on any desktop or __mobile__ browser.\n\n📦 All features are hidden inside.\n\n👫 Stands more that one instance.\n\n🤔 Supports nested locks\n\n🔥 Supports nested scrollable elements.\n\n### Just wrap your content with `\u003cScrollLocky /\u003e` and it block any iterations with the rest of a page. \n\nThis is one line solution for the problem.\n\nAll due to [React-Locky](https://github.com/theKashey/react-locky) it uses underneath\n\n__this could be dangerous__ for focus state management.\nConsider use more _composite_ library - [react-focus-on](https://github.com/theKashey/react-focus-on) - to handle the every edge case.\n- focus\n- scroll\n- aria (inert)  \n\n# PS\nI've create [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) - a smaller version of this library.\n\n# API\n\nJust wrap _anything_ with `ScrollLocky`, which accepts only one prop - \"enabled\"\n\nThere is only a few pros to configure\n -  `noRelative` - do not apply \"position:relative\" on body.\n -  `noImportant` - do not apply \"!important\" to any rules.\n -  `className` - className for a internal div\n -  `headless` - enables \"no-div\" mode (will pick the first DOM node-inside)\n -  `enabled` - allows to disable Lock behavior (CSS modification and Locky), keeping it rendered.\n -  `isolation` - allows to disable event isolation, preventing only `scroll` events, not everything outside target node (default behaviour).\n Use `isolation:false` if you have some \"shadow\" underneath modal, to catch and redirect all events. \n -  `gapMode=[padding|margin(default)]` - gap policy, to control the way scrollLocky generate `the gap` instead of scrollbars.\nThis option affects how absolutely positioned elements will work:\n    - gapMode=\"padding\" - \"right:0\" will be on window right (will jump on scroll removal)\n    - gapMode=\"margin\" - \"right:0\" will be in constant position (will not jump, but leave a gap)\n\n```js\nimport {ScrollLocky} from 'react-scroll-locky';\n\n\u003cModal\u003e\n \u003cScrollLocky\u003e\n   \u003cMyContent\u003e\n     Anything!\n   \u003c/MyContent\u003e\n \u003c/ScrollLocky\u003e\n\u003c/Modal\u003e   \n```\n\n## Hide scrollbars only\nTo hide body scrollbars only (does not disable scroll on scrollable container, or body scroll on iOS) use `HideBodyScroll` component\n```js\nimport {HideBodyScroll} from 'react-scroll-locky';\n\n\u003cHideBodyScroll noRelative noImportant gapMode/\u003e // body scrollbar is hidden\n```\n\n# The order\nYou may have more than one _active_ Lock on the page:\n - Only first Lock is `real`. Only it hides the scrollbars.\n - Only the last Lock is `active`. Only last-mounted Locky is working, silencing the rest of a page.\n - To have more that one active lock - consider using `HideBodyScroll` + `react-locky` directly.\n\n# Gap modes\n - \"padding\" - for the simple use. It will keep scroll-bar-gap for the normal elements,\n letting _absolutely_ or _fixed_ positioned elements hit the right-most window edge.\n - \"margin\" - for the advanced use. Will always preserve the gap, letting only the \n `fixed` positioned elements fill the while page(preffered mode)  \n \nDefault Gap Mode is \"margin\", it would fit for _almost_ anyone.\nBut if you have another margin on your body (please dont), or have `width:100%` on the body - it would not.\n\nThen, and only then use `gapMode=\"padding\"`, and dont forget to add `box-sizing: border-box;` to include _paddings_, we are going to set, to your width.\n(and don't send paddings on body, then).\n \n To _fill_ the gap with `absolute` positioned elements - use another exposed component.\n\nSpecial component - `ScrollLockyPane` will help maintain the right \"right\" position.\nAlternatively - use `react-scroll-locky-edge-right` class, to set proper right border for a container.\n```js\nimport {ScrollLocky, ScrollLockyPane} from 'react-scroll-locky';\n\n// position:absolute, left:0, right: -\"gap\"px\n\u003cScrollLockyPane\u003e\n  // your modal inside\n  \u003cModal\u003e\n     \u003cScrollLocky\u003e\n        \u003cMyContent/\u003e  \n     \u003c/ScrollLocky\u003e\n  \u003c/Modal\u003e \n\u003c/ScrollLockyPane\u003e\n```\n\n\n`ScrollLockyPane` will \"return\" the \"consumed\" width to the component.\n\n# Multiple locks\n- If you need multiple locks to be active in a same time - just do it. They will work together.\n-  \n\n# Article\n There is a medium article about preventing the body scroll - [How to fight the \u003cbody\u003e scroll](https://medium.com/@antonkorzunov/how-to-fight-the-body-scroll-2b00267b37ac)\n\n## More\n\nFor a good modals you also need a proper Focus Management Library.\nUse [react-focus-lock](https://github.com/theKashey/react-focus-lock) to complete the picture.\n\n## See also\n - [react-focus-on](https://github.com/theKashey/react-focus-on) - Finite Modal creator (uses Scroll-Locky) underneath.\n - [react-locky](https://github.com/theKashey/react-locky) - React event canceler\n - [react-scrolllock](https://github.com/jossmac/react-scrolllock) - React scroll lock\n - [scroll-lock](https://github.com/FL3NKEY/scroll-lock) - DOM scroll lock  \n\n# Licence\n MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthekashey%2Freact-scroll-locky","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthekashey%2Freact-scroll-locky","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthekashey%2Freact-scroll-locky/lists"}