react-remove-scroll

react-remove-scroll uses non-passive event listeners to ensure synchronous scroll/touch handling. This is necessary for the library to function correctly but may trigger warnings in Chrome DevTools and can impact scrolling performance.

Optimization Tip: If you are dealing with very large scrollable areas, consider using the noIsolation prop to mitigate performance impacts.

react-remove-scroll disables scrolling on everything outside of the provided children node. It is compatible with mouse and touch devices, supports both vertical and horizontal scrolling, and manages the document scrollbar to prevent layout shifts. It also supports nested scrollable elements and React Portals.

To use it, wrap the content that should remain scrollable with the RemoveScroll component.

import {RemoveScroll} from 'react-remove-scroll';

<RemoveScroll>
  Only this content would be scrollable
</RemoveScroll>

By default, RemoveScroll creates an internal div to capture events. You can either style this div using className or remove it entirely by using forwardProps on a child element.

Option 1: Using className on the component

<RemoveScroll className="scroll">
  Only this content would be scrollable
</RemoveScroll>

Option 2: Using forwardProps to inject props into a child

<RemoveScroll forwardProps>
  <div className="scroll">
    Only this content would be scrollable
  </div>
</RemoveScroll>

To ensure position:fixed elements are sized correctly when using RemoveScroll, you must apply specific class names provided by the library. This allows elements to behave as if they have width: 100% or specific alignments (like right: 0) even when the body scroll is disabled.

Use RemoveScroll.classNames to access these utility classes:

• RemoveScroll.classNames.fullWidth
• RemoveScroll.classNames.zeroRight

import {RemoveScroll} from 'react-remove-scroll';

// To make an element behave like width: 100%
<div className={cx(classWithPositionFixed, RemoveScroll.classNames.fullWidth)} />

// To make an element behave like right: 0
<div className={cx(classWithPositionFixed, RemoveScroll.classNames.zeroRight)} />

The RemoveScroll component has two modes for handling children, determined by the forwardProps logic:

1. Standard Mode (forwardProps={false}): The component wraps its children in a div. In this mode, children should be a ReactNode.
2. Forwarding Mode (forwardProps={true}): The component forwards all props to a single child node. In this mode, children must be a ReactElement.

To reduce the initial bundle size, you can use the sidecar pattern. This allows the heavy logic of react-remove-scroll to be loaded only when needed.

1. Import sidecar from react-remove-scroll.
2. Import RemoveScroll from react-remove-scroll/UI.
3. Create a sidecar function that dynamically imports react-remove-scroll/sidecar.
4. Pass the sidecar to the sideCar prop of RemoveScroll.

import {sidecar} from "react-remove-scroll";
import {RemoveScroll} from 'react-remove-scroll/UI';

const sidecar = sidecar(() => import('react-remove-scroll/sidecar'));

<RemoveScroll sideCar={sidecar}>
  Will load logic from a sidecar when needed
</RemoveScroll>

The RemoveScroll component accepts several props to control how scroll locking and event isolation behave.

Key configuration options include:

• enabled: Switches the behavior of the component on or off.
• removeScrollBar: Controls whether the body scroll bar is removed (defaults to false).
• noRelative: Prevents `position=

The RemoveScroll component is the primary entrypoint for the library. It is used to prevent scrolling on the body and other elements when a specific part of the UI (like a modal or overlay) is active. It can be used as a component that wraps content or as a combination of features to manage scroll locking effectively.

import { RemoveScroll } from 'react-remove-scroll';

function MyComponent() {
  return (
    <RemoveScroll>
      <div>
        {/* Content inside here will be visible, but the background will not scroll */}
        <h1>Modal Content</h1>
      </div>
    </RemoveScroll>
  );
}

You can control how events outside the lock are handled using noIsolation and inert:

• noIsolation: Disables event isolation (suppressing of events happening outside of the Lock). Defaults to false.
• inert: Enables complete Lock isolation using pointer-events:none for anything outside the Lock. This is useful for strict isolation but should be used carefully. Defaults to false.
• allowPinchZoom: Allows pinch-zoom gestures, though scroll behavior may vary. Defaults to false.

When the scrollbar is removed, a 'gap' is created. You can control how this gap is filled and which elements are included in the lock:

• gapMode: Controls how the gap is filled. Options are 'padding' or 'margin'. Defaults to 'margin'.
• shards: An array of refs to other Elements that should be considered as part of the Lock. This allows multiple disconnected DOM nodes to be treated as a single locked area.