This was a great project to learn from and fulfilled the requirements it set out to. Unfortunately, I can no-longer give this project the time it needs. Consider body-scroll-lock as an alternative.
Prevent scroll on the <body /> when a component is mounted.
yarn add react-scrolllock
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> ); } }
| 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. |
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 |