Home

Awesome

<div align="center"> <h1>React-remove-📜</h1> <br/> dont even scroll <br/> <a href="https://www.npmjs.com/package/react-remove-scroll"> <img src="https://img.shields.io/npm/v/react-remove-scroll.svg?style=flat-square" /> </a> <a href="https://travis-ci.org/theKashey/react-remove-scroll"> <img src="https://img.shields.io/travis/theKashey/react-remove-scroll.svg?style=flat-square" alt="Build status"> </a> <a href="https://www.npmjs.com/package/react-remove-scroll"> <img src="https://img.shields.io/npm/dm/react-remove-scroll.svg" alt="npm downloads"> </a> <a href="https://bundlephobia.com/result?p=react-remove-scroll"> <img src="https://img.shields.io/bundlephobia/minzip/react-remove-scroll.svg" alt="bundle size"> </a> <br/> </div>

react-remove-scroll

NPM version

Disables scroll outside of children node.

Usage

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

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

<RemoveScroll>
  Only this content would be scrollable
</RemoveScroll>  

RemoveScroll accept following props

Size


import {sidecar} from "react-remove-scroll";
import {RemoveScroll} from 'react-remove-scroll/UI';

const sidecar = sidecar(() => import('react-remove-scroll/sidecar'));

<RemoveScroll sideCar={sidecar}>
  Will load logic from a sidecar when needed
</RemoveScroll>  

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

<RemoveScroll className="scroll">
  Only this content would be scrollable
</RemoveScroll>
<RemoveScroll forwardProps>
  <div className="scroll"> //RemoveScroll will inject props to this div
    Only this content would be scrollable
  </div>
</RemoveScroll> 

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.

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

// to make "width: 100%"
<div className={cx(classWithPositionFixed, RemoveScroll.classNames.fullWidth)} />

// to make "right:0"
<div className={cx(classWithPositionFixed, RemoveScroll.classNames.zeroRight)} />

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

Scroll-Locky

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

See also

This package is relative smaller(1), more react friendly(2), works with non zero body margins(3), and has a better "overscroll" management.

License

MIT