react-scroll-context

A component to disable scroll on document body when its children are scrolled.


Keywords
react, scroll, scroll-context, child-scroll, body, disable scroll, dropdown scroll
License
MIT
Install
npm install react-scroll-context@1.1.0

Documentation

Build Status License: MIT

react-scroll-context

A component to disable scroll on document body when its children are scrolled.

Install

yarn add react-scroll-context

or

npm install react-scroll-context --save

Props

  1. enable: boolean set this to true if you want to manually disable scroll. Eg:
    • enable: true Enables scroll context and prevents scroll on document body.
    • enable: false Disables scrolls context and allows scroll on document body.
  2. styles: string String of classNames to be added to the parent container.

WARNING The mouse events will not work if the enable prop is set to either(true / false).

Help

  1. Uses mouse listeners for desktop / laptop browsers.
  2. For mobile devices set enabled prop for enabling / disabling scroll context.
  3. Takes care of jumps due to scrollbars on windows, linux etc.

Example

import ScrollContext from 'react-scroll-context';

function Component(props) {
  return (
    <ScollContext>
        {// your awesome jsx}
    </ScrollContext>
  );
}

License

MIT