react-scroll-lock-component

A React component wrapper that restricts scrolling capabilities of everything except for its children.

Wheel events, touchmove events, and key press events that affect page location (e.g. directional arrows, pageup/pagedown/spacebar) are all locked.

Demo

Check out the demo here!

Installation

npm install react-scroll-lock-component

or

yarn add react-scroll-lock-component

Usage

import React from 'react';
import ScrollLock from 'react-scroll-lock-component';

export default () => (
    <div>
        <ScrollLock>
            <div> 
                {/*
                    unlike normal scroll functionality, when the user scrolls this
                    div and reaches the beginning or end nothing else on the page will scroll
                */}
            </div>
        </ScrollLock>
        <div>
            {/* scrolling outside of the scroll lock will remain normal */}
        </div>
    </div>
);

optional props

|Prop|description|default value| |:-:|:-:|:-:| | enabled|programatically enable or disable the scroll lock|true| |className|apply custom styles to the scroll lock component|''|

Credits

Adapted from this old mixin

License

MIT