React Scroll Lock
Prevent scroll on the <body />
when a component is mounted.
Install
yarn add react-scrolllock
Usage
; state = lockScroll: false { 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=thisstatelockScroll /> </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 |
Required The element that can be scrolled. |