react-remove-scroll-bar
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
Dynamic scrollbars
adding a dynamic
propertly on RemoveScrollBar
would make it reactive to window resize.
Without it once removed scrollbar will replaced by a gap
, even if scrollbar is not needed anymore.
You dont need this option in normal cases.
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} from 'react-remove-scroll-bar';
<div className={zeroRightClassName} />
<div className={fullWidthClassName} />
Size
500b after compression (excluding tslib).
Scroll-Locky
Extracted react-scroll-locky
License
MIT