React-remove-📜

dont even scroll

react-remove-scroll
====
![NPM version](https://www.npmjs.com/package/react-remove-scroll)

Disables scroll outside of children node.

- 🖱 mouse and touch devices friendly
- 📈 vertical and horizontal
- 📜 removes document scroll bar maintaining it space
- ✅ support nested scrollable elements
- 🕳 supports react-portals (uses React Event system)
- ☠️ it could block literally any scroll anywhere

Usage

Just wrap content, which should be scrollable, and everything else would not.
``

js
import {RemoveScroll} from 'react-remove-scroll';

Only this content would be scrollable`

RemoveScrollaccept following props -children-[enabled]- activate or deactivate component behaviour without removing it. -[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__. -[noRelative=false] - prevents setting position: relativeon the body. -[noIsolation=false]- disables outer event capturing. Event capturing is React friendly and unlikely be a problem. But if you are using _shadowbox_ of some sort - you dont need it. -[inert=false] - ☠️(be careful) disables events the rest of page completely using pointer-eventsexcept the Lock(+shards). React 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). -[forwardProps] - will forward all props to the children-[className]- className for an internal div -[removeScrollBar] - to control scroll bar removal. Set to false, if you prefer to keep it (wheel and touch scroll is still disabled).

`Size`


- (🧩 full) 1.7kb after compression (excluding tslib).
---
- (👁 UI) __400b__, visual elements only
- (🚗 sidecar) 1.5kb, side effects

js
import {sidecar} from "react-remove-scroll";
import {RemoveScroll} from 'react-remove-scroll/UI';
const sidecar = sidecar(() => import('react-remove-scroll/sidecar'));

Will load logic from a sidecar when needed`

> Consider setting -webkit-overflow-scrolling: touch; on a document level for a proper mobile experience.

`Internal div`


By default RemoveScroll will create a div to handle and capture events.
You may specify

className for it, if you need, or __remove it__.

The following code samples will produce the same output`js Only this content would be scrollable`

`js

 //RemoveScroll will inject props to this div
    Only this content would be scrollable


Pick the first one if you don't need a second.
Position:fixed elements

To properly size these elements please add a special className to them.

jsx
import {RemoveScroll} from 'react-remove-scroll';
// to make "width: 100%"


// to make "right:0"


See react-remove-scroll-bar documentation for details.
More than one lock

When stacked more is active (default) only one (last) component would be active.
Over isolation

That could happen - 
you disable scroll on the body, 
you are suppressing all scroll and wheel events,
and you are ghosting the rest of the page by the

inert

 prop.
Only something inside Lock does exists for the browser, and that might be less than you expected.

Dont forget about shard, dont forget - inert is not portals friendly, dont forget - you dont need over isolation in most of the cases.

> just be careful!

`Performance`


To do the job this library setup _non_ passive event listener. Chrome dev tools would complain about it, as a 
performance no-op.
We have to use synchronous scroll/touch handler, and it may affect scrolling performance.

Consider using noIsolation` mode, if you have large scrollable areas.

Supported React versions

- v1 supports React 15/16
- v2 requires 16.8.0+ (hooks)

Scroll-Locky

This is a refactoring of another library - react-scroll-locky -
to make package smaller and more react-portals friendly.

License

MIT

react-remove-scroll

React-remove-📜

Usage

Size

Internal div

Position:fixed elements

More than one lock

Over isolation