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
;; <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