Prevent scroll on the body when component is mounted.
npm install react-scrolllock-configurablePrevent scroll on the when a component is mounted.
react-scrolllock by jossmac with ability to accept options object which will override some touch handlers.Forked Github Repo
Forked NPM Package
``bash`
yarn add react-scrolllock-configurable
`js
import ScrollLock, { TouchScrollable } from 'react-scrolllock-configurable';
class Modal extends Component {
state = { lockScroll: false }
render() {
return (
// 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 | Required The element that can be scrolled. |
| options object | Optional Provide an options object |##### Options
`js
Options object can have onTouchMove and onTouchStart event handlers if you need to unblock scrolling
{
onTouchMove: (event) => {}
onTouchStart: (event) => {}
}
``