5.0.1 • Published 4 years ago
react-scrolllock v5.0.1
React Scroll Lock
Prevent scroll on the <body /> when a component is mounted.
Install
yarn add react-scrolllockUsage
import ScrollLock, { TouchScrollable } from 'react-scrolllock';
class Modal extends Component {
state = { lockScroll: false }
render() {
return (
<div>
...
// the lock accepts a single child element, which supports touch-scrolling.
<ScrollLock>
<ElementWithScrollableContent>...</ElementWithScrollableContent>
</ScrollLock>
// if your app structure doesn't allow wrapping like above, the `TouchScrollable`
// component is exposed as a named export.
<ScrollLock />
<TouchScrollable>
<ElementWithScrollableContent>...</ElementWithScrollableContent>
</TouchScrollable>
// you can also toggle the lock based on some state.
<ScrollLock isActive={this.state.lockScroll} />
</div>
);
}
}Props
ScrollLock
| Property | Description |
|---|---|
accountForScrollbars boolean | Default: true -- Whether or not to replace the scrollbar width when active. |
isActive boolean | Default: true -- Whether or not the lock is active. |
children element | Default: null -- This element is wrapped internally by the TouchScrollable component. |
TouchScrollable
Wrap an element in the TouchScrollable component if you need an area that supports scroll on mobile.
This is necessary because the touchmove event is explicitly cancelled — iOS doesn't observe overflow: hidden; when applied to the <body /> element 😢
| Property | Description | |
|---|---|---|
children element | ref => element | Required The element that can be scrolled. |
5.0.1
4 years ago
5.0.0
4 years ago
4.0.1
5 years ago
4.0.0
5 years ago
3.0.2
6 years ago
3.0.1
6 years ago
3.0.0
6 years ago
2.0.7
6 years ago
2.0.6
6 years ago
2.0.5
6 years ago
2.0.4
6 years ago
2.0.3
6 years ago
2.0.2
6 years ago
2.0.1
6 years ago
2.0.0
6 years ago
1.0.9
7 years ago
1.0.8
7 years ago
1.0.7
7 years ago
1.0.6
7 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago