# react-remove-scroll-bar
> Removes body scroll without content _shake_
Latest version **2.3.8** (published 2024-12-15) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-remove-scroll-bar
pnpm add react-remove-scroll-bar
yarn add react-remove-scroll-bar
bun add react-remove-scroll-bar
```
## Health
**Score 55/100 (C)** — status: stable.
Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.
Warnings: low downloads.
Negative: stale.
## Facts
| | |
|---|---|
| Version | 2.3.8 |
| Published | 2024-12-15 |
| First published | 2019-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 24.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 124 |
| Author | Anton Korzunov |
| Maintainers | kashey |
| Keywords | scroll |
## Links
- npm: https://www.npmjs.com/package/react-remove-scroll-bar
- Repository: https://github.com/theKashey/react-remove-scroll-bar
- Homepage: https://github.com/theKashey/react-remove-scroll-bar#readme
- Issues: https://github.com/theKashey/react-remove-scroll-bar/issues
- npm.io page: https://npm.io/package/react-remove-scroll-bar
## Dependencies (2)
- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [react-style-singleton](https://npm.io/package/react-style-singleton.md) ^2.2.2
## Recent versions
- 2.3.8 (latest) — 2024-12-15
- 2.3.7 — 2024-12-15
- 2.3.6 — 2024-03-14
- 2.3.5 — 2024-02-19
- 2.3.4 — 2022-10-12
- 2.3.3 — 2022-06-06
- 2.3.1 — 2022-05-01
- 2.3.0 — 2022-04-17
- 2.2.0 — 2021-02-10
- 2.1.1 — 2020-11-27
- 2.1.0 — 2020-04-16
- 2.0.0 — 2019-06-07
- 1.2.0 — 2019-06-04
- 1.1.5 — 2019-05-03
- 1.1.4 — 2019-03-02
- … 5 more at https://npm.io/package/react-remove-scroll-bar/versions
## README
react-remove-scroll-bar
[](https://www.npmjs.com/package/react-remove-scroll-bar)
[](https://bundlephobia.com/result?p=react-remove-scroll-bar)
[](https://www.npmtrends.com/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
```js
import {RemoveScrollBar} from 'react-remove-scroll-bar';
-> 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".
```js
import {zeroRightClassName,fullWidthClassName, noScrollbarsClassName} from 'react-remove-scroll-bar';
// to set `right:0` on an element
// to set `width:100%` on an element
// to remove scrollbar from an element
```
# Size
500b after compression (excluding tslib).
# Scroll-Locky
All code is a result of a [react-scroll-locky](https://github.com/theKashey/react-scroll-locky) refactoring.
# Article
There is a medium article about preventing the body scroll - [How to fight the scroll](https://medium.com/@antonkorzunov/how-to-fight-the-body-scroll-2b00267b37ac)
# License
MIT
---
_Source: https://npm.io/package/react-remove-scroll-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._