\n\nreact-remove-scroll\n====\n[](https://www.npmjs.com/package/react-remove-scroll)\n\nDisables scroll outside of `children` node.\n\n- ???? mouse and touch devices friendly\n- ???? vertical and horizontal\n- ???? removes document scroll bar maintaining it space\n- ✅ support nested scrollable elements\n- ???? supports react-portals (uses React Event system)\n- ☠️ it could block literally any scroll anywhere\n\n# Usage\nJust wrap content, which should be scrollable, and everything else would not. \n```js\nimport {RemoveScroll} from 'react-remove-scroll';\n\n\n Only this content would be scrollable\n \n```\n\n`RemoveScroll` accept following props\n- `children`\n- `[enabled]` - activate or deactivate component behaviour without removing it.\n- `[allowPinchZoom=false]` - enabled \"pinch-n-zoom\" behavior. By default it might be prevented. However - pinch and zoom might break \"scroll isolation\", and __disabled by default__.\n- `[noRelative=false]` - prevents setting `position: relative` on the body.\n- `[noIsolation=false]` - disables outer event capturing. Event capturing is React friendly and unlikely be a problem.\nBut if you are using _shadowbox_ of some sort - you dont need it.\n- `[inert=false]` - ☠️(be careful) disables events the rest of page completely using `pointer-events` except the Lock(+shards). \nReact portals not friendly, might lead to production issues. Enable only for __rare__ cases, when you have to disable scrollbars somewhere on the page(except body, Lock and shards). \n- `[forwardProps]` - will forward all props to the `children`\n- `[className]` - className for an internal div\n- `[removeScrollBar]` - to control scroll bar removal. Set to false, if you prefer to keep it (wheel and touch scroll is still disabled).\n\n# Size\n- (???? full) 1.7kb after compression (excluding tslib).\n---\n- (???? UI) __400b__, visual elements only\n- (???? sidecar) 1.5kb, side effects\n```js\nimport {sidecar} from \"react-remove-scroll\";\nimport {RemoveScroll} from 'react-remove-scroll/UI';\n\nconst sidecar = sidecar(() => import('react-remove-scroll/sidecar'));\n\n\n Will load logic from a sidecar when needed\n \n```\n\n> Consider setting `-webkit-overflow-scrolling: touch;` on a document level for a proper mobile experience.\n\n## Internal div\nBy default RemoveScroll will create a div to handle and capture events.\nYou may specify `className` for it, if you need, or __remove it__.\n\nThe following code samples will produce the same output\n```js\n\n Only this content would be scrollable\n\n```\n\n```js\n\n
//RemoveScroll will inject props to this div\n Only this content would be scrollable\n
\n \n```\nPick the first one if you don't need a second.\n\n## Position:fixed elements\nTo properly size these elements please add a special className to them.\n```jsx\nimport {RemoveScroll} from 'react-remove-scroll';\n\n// to make \"width: 100%\"\n\n\n// to make \"right:0\"\n\n```\nSee [react-remove-scroll-bar](https://github.com/theKashey/react-remove-scroll-bar) documentation for details.\n\n## More than one lock\nWhen stacked more is active (default) only one (last) component would be active.\n\n## Over isolation\nThat could happen - \nyou disable scroll on the body, \nyou are suppressing all scroll and wheel events,\nand you are ghosting the rest of the page by the `inert` prop.\n\nOnly something inside Lock does exists for the browser, and that might be less than you expected.\n\nDont forget about `shard`, dont forget - `inert` is not portals friendly, dont forget - you dont need over isolation in most of the cases.\n\n> just be careful! \n\n# Performance\nTo do the job this library setup _non_ passive event listener. Chrome dev tools would complain about it, as a \nperformance no-op.\n\nWe have to use synchronous scroll/touch handler, and it may affect scrolling performance.\n\nConsider using `noIsolation` mode, if you have large scrollable areas.\n\n# Supported React versions\n- v1 supports React 15/16\n- v2 requires 16.8.0+ (hooks)\n\n# Scroll-Locky\nThis is a refactoring of another library - [react-scroll-locky](https://github.com/theKashey/react-scroll-locky) -\nto make package smaller and more react-portals friendly.\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 - [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock) - DOM scroll lock\n \n > This package is relative smaller(1), more react friendly(2), works with non zero body margins(3), and has a better \"overscroll\" management. \n\n# License\nMIT","_attachments":{},"homepage":"https://github.com/theKashey/react-remove-scroll#readme","bugs":{"url":"https://github.com/theKashey/react-remove-scroll/issues"},"license":"MIT"}
![](\"https://img.shields.io/npm/v/react-remove-scroll.svg?style=flat-square\")
\n \n \n \n ![\"Build](\"https://img.shields.io/travis/theKashey/react-remove-scroll.svg?style=flat-square\")
\n \n\n \n ![\"npm](\"https://img.shields.io/npm/dm/react-remove-scroll.svg\")
\n \n\n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/react-remove-scroll.svg\")
\n \n