Home

Awesome

💀 react-scroll-locky was replaced by react-remove-scroll 💀

📜🔒 react-scroll-locky


📜 Prevents page from being scrolled. Or any other "not permitted" container.

💡 Hides scrollbars, preserving page width.

🤘 Works on any desktop or mobile browser.

📦 All features are hidden inside.

👫 Stands more that one instance.

🤔 Supports nested locks

🔥 Supports nested scrollable elements.

Just wrap your content with <ScrollLocky /> and it block any iterations with the rest of a page.

This is one line solution for the problem.

All due to React-Locky it uses underneath

this could be dangerous for focus state management. Consider use more composite library - react-focus-on - to handle the every edge case.

PS

I've create react-remove-scroll - a smaller version of this library.

API

Just wrap anything with ScrollLocky, which accepts only one prop - "enabled"

There is only a few pros to configure

import {ScrollLocky} from 'react-scroll-locky';

<Modal>
 <ScrollLocky>
   <MyContent>
     Anything!
   </MyContent>
 </ScrollLocky>
</Modal>   

Hide scrollbars only

To hide body scrollbars only (does not disable scroll on scrollable container, or body scroll on iOS) use HideBodyScroll component

import {HideBodyScroll} from 'react-scroll-locky';

<HideBodyScroll noRelative noImportant gapMode/> // body scrollbar is hidden

The order

You may have more than one active Lock on the page:

Gap modes

Default Gap Mode is "margin", it would fit for almost anyone. But if you have another margin on your body (please dont), or have width:100% on the body - it would not.

Then, and only then use gapMode="padding", and dont forget to add box-sizing: border-box; to include paddings, we are going to set, to your width. (and don't send paddings on body, then).

To fill the gap with absolute positioned elements - use another exposed component.

Special component - ScrollLockyPane will help maintain the right "right" position. Alternatively - use react-scroll-locky-edge-right class, to set proper right border for a container.

import {ScrollLocky, ScrollLockyPane} from 'react-scroll-locky';

// position:absolute, left:0, right: -"gap"px
<ScrollLockyPane>
  // your modal inside
  <Modal>
     <ScrollLocky>
        <MyContent/>  
     </ScrollLocky>
  </Modal> 
</ScrollLockyPane>

ScrollLockyPane will "return" the "consumed" width to the component.

Multiple locks

Article

There is a medium article about preventing the body scroll - How to fight the <body> scroll

More

For a good modals you also need a proper Focus Management Library. Use react-focus-lock to complete the picture.

See also

Licence

MIT