https://github.com/thekashey/react-scroll-locky
📜🔒 – React full-cream "anti-scroll" library, you were looking for
https://github.com/thekashey/react-scroll-locky
body-scroll react scrollbar scrolling
Last synced: about 1 year ago
JSON representation
📜🔒 – React full-cream "anti-scroll" library, you were looking for
- Host: GitHub
- URL: https://github.com/thekashey/react-scroll-locky
- Owner: theKashey
- Created: 2018-07-16T12:35:41.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-09-20T22:03:41.000Z (almost 7 years ago)
- Last Synced: 2025-04-19T00:49:25.647Z (about 1 year ago)
- Topics: body-scroll, react, scrollbar, scrolling
- Language: TypeScript
- Homepage:
- Size: 229 KB
- Stars: 57
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> 💀 react-scroll-locky was replaced by [react-remove-scroll](https://github.com/theKashey/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 `` and it block any iterations with the rest of a page.
This is one line solution for the problem.
All due to [React-Locky](https://github.com/theKashey/react-locky) it uses underneath
__this could be dangerous__ for focus state management.
Consider use more _composite_ library - [react-focus-on](https://github.com/theKashey/react-focus-on) - to handle the every edge case.
- focus
- scroll
- aria (inert)
# PS
I've create [react-remove-scroll](https://github.com/theKashey/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
- `noRelative` - do not apply "position:relative" on body.
- `noImportant` - do not apply "!important" to any rules.
- `className` - className for a internal div
- `headless` - enables "no-div" mode (will pick the first DOM node-inside)
- `enabled` - allows to disable Lock behavior (CSS modification and Locky), keeping it rendered.
- `isolation` - allows to disable event isolation, preventing only `scroll` events, not everything outside target node (default behaviour).
Use `isolation:false` if you have some "shadow" underneath modal, to catch and redirect all events.
- `gapMode=[padding|margin(default)]` - gap policy, to control the way scrollLocky generate `the gap` instead of scrollbars.
This option affects how absolutely positioned elements will work:
- gapMode="padding" - "right:0" will be on window right (will jump on scroll removal)
- gapMode="margin" - "right:0" will be in constant position (will not jump, but leave a gap)
```js
import {ScrollLocky} from 'react-scroll-locky';
Anything!
```
## Hide scrollbars only
To hide body scrollbars only (does not disable scroll on scrollable container, or body scroll on iOS) use `HideBodyScroll` component
```js
import {HideBodyScroll} from 'react-scroll-locky';
// body scrollbar is hidden
```
# The order
You may have more than one _active_ Lock on the page:
- Only first Lock is `real`. Only it hides the scrollbars.
- Only the last Lock is `active`. Only last-mounted Locky is working, silencing the rest of a page.
- To have more that one active lock - consider using `HideBodyScroll` + `react-locky` directly.
# Gap modes
- "padding" - for the simple use. It will keep scroll-bar-gap for the normal elements,
letting _absolutely_ or _fixed_ positioned elements hit the right-most window edge.
- "margin" - for the advanced use. Will always preserve the gap, letting only the
`fixed` positioned elements fill the while page(preffered mode)
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.
```js
import {ScrollLocky, ScrollLockyPane} from 'react-scroll-locky';
// position:absolute, left:0, right: -"gap"px
// your modal inside
```
`ScrollLockyPane` will "return" the "consumed" width to the component.
# Multiple locks
- If you need multiple locks to be active in a same time - just do it. They will work together.
-
# Article
There is a medium article about preventing the body scroll - [How to fight the scroll](https://medium.com/@antonkorzunov/how-to-fight-the-body-scroll-2b00267b37ac)
## More
For a good modals you also need a proper Focus Management Library.
Use [react-focus-lock](https://github.com/theKashey/react-focus-lock) to complete the picture.
## See also
- [react-focus-on](https://github.com/theKashey/react-focus-on) - Finite Modal creator (uses Scroll-Locky) underneath.
- [react-locky](https://github.com/theKashey/react-locky) - React event canceler
- [react-scrolllock](https://github.com/jossmac/react-scrolllock) - React scroll lock
- [scroll-lock](https://github.com/FL3NKEY/scroll-lock) - DOM scroll lock
# Licence
MIT