react-remove-scroll-bar

What is react-remove-scroll-bar?

The react-remove-scroll-bar package is designed to remove the scroll bar from the page or a specific element without affecting the page layout. It is useful for creating modals, full-screen menus, or other overlay components where you want to prevent background scrolling while the overlay is active.

What are react-remove-scroll-bar's main functionalities?

Remove scroll bar from the entire page

This code sample demonstrates how to remove the scroll bar from the entire page by simply including the <RemoveScrollBar /> component in your application.

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

function App() {
  return (
    <>
      <RemoveScrollBar />
      {/* rest of your application */}
    </>
  );
}

Remove scroll bar with gap compensation

This code sample shows how to remove the scroll bar and compensate for the gap that might be left using the 'margin' mode, which adjusts the margin of the body element to fill the space where the scroll bar was.

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

function App() {
  return (
    <>
      <RemoveScrollBar gapMode='margin' />
      {/* rest of your application */}
    </>
  );
}

Other packages similar to react-remove-scroll-bar

body-scroll-lock

The body-scroll-lock package is similar to react-remove-scroll-bar in that it prevents scrolling on the body element. It provides more granular control over touch events on mobile devices but does not automatically handle the layout shift that can occur when the scroll bar is removed.

react-scrolllock

React-scrolllock is another package that can be used to lock scrolling on the body. It is similar to react-remove-scroll-bar but does not remove the scroll bar visually; it only disables scrolling interactions.

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

Changelog

2.3.6 (2024-03-14)

Bug Fixes

• correct lock behavior for nested invocations, fixes #57 (bd44ebe)