react-remove-scroll-bar

Removes body scroll without content _shake_

Usage no npm install needed!

<script type="module">
  import reactRemoveScrollBar from 'https://cdn.skypack.dev/react-remove-scroll-bar';
</script>

README

react-remove-scroll-bar

npm bundle size downloads

v1+ for React 15, v2+ requires React 16.8+

Removes scroll bar (by setting overflow: hidden on body), and preserves the scroll bar "gap".

Read - it just makes scroll bar invisible.

Does nothing if scroll bar does not consume any space.

Usage

import {RemoveScrollBar} from 'react-remove-scroll-bar';

<RemoveScrollBar /> -> no scroll bar

The Right Border

To prevent content jumps position:fixed elements with right:0 should have additional classname applied. It will just provide a non-zero right, when it needed, to maintain the right "gap".

import {zeroRightClassName,fullWidthClassName, noScrollbarsClassName} from 'react-remove-scroll-bar';

// to set `right:0` on an element
<div className={zeroRightClassName} />

// to set `width:100%` on an element
<div className={fullWidthClassName} />

// to remove scrollbar from an element
<div className={noScrollbarsClassName} />

Size

500b after compression (excluding tslib).

Scroll-Locky

All code is a result of a react-scroll-locky refactoring.

Article

There is a medium article about preventing the body scroll - How to fight the scroll

License

MIT