Prevent scroll on the body when component is mounted.
npm install @michellocana/react-scrolllockreact and react-dom peer dependencies and moves from Flow to TypeScript.
bash
yarn add react-scrolllock
`
Usage
`js
import { ScrollLock, TouchScrollable } from 'react-scrolllock'
class Modal extends Component {
state = { lockScroll: false }
render() {
return (
... // the lock accepts a single child element, which supports touch-scrolling.
...
// if your app structure doesn't allow wrapping like above, the TouchScrollable // component is exposed as a
named export.
...
// you can also toggle the lock based on some state.
)
}
}
`
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 element 😢
| Property | Description | - |
| ------------------ | ---------------- | ---------------------------------------------- |
| children element | ref => element` | Required The element that can be scrolled. |