Package Exports

react-remove-scroll-bar
react-remove-scroll-bar/constants
react-remove-scroll-bar/dist/es2015/constants.js
react-remove-scroll-bar/dist/es2015/index.js
react-remove-scroll-bar/dist/es5/constants.js
react-remove-scroll-bar/dist/es5/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-remove-scroll-bar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-remove-scroll-bar

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