react-remove-scroll-bar

Removes body scroll without content _shake_

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-remove-scroll-bar
8452.3.62 months ago5 years agoMinified + gzip package size for react-remove-scroll-bar in KB

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