A lightweight CSS-only scroll lock solution for iOS Safari and Android
npm install react-ios-scroll-lockThe initial idea was to lock the body scroll on iOS Safari whenever we see fit, turns out we made something that works everywhere on the web
This was achieved with overscroll-behaviour css property
Most workarounds involve JavaScript, touchmove event listeners, or weird side effects. I wanted something simpler — so I built react-ios-scroll-lock: a CSS-only scroll lock component that works across iOS, Android, and all major browsers.
⚡️ Pure CSS – no JS scroll hacks (JS used only to measure device height and detect iOS)
🧘 Doesn’t interfere with touch or scroll events
📱 Works on iOS, Android, and desktop
🪶 Minimal performance cost
🧩 Easy to plug into any React project
_LIGHT Package Size:_
$ npm install react-ios-scroll-lock
or
$ yarn add react-ios-scroll-lock
``javascript
// Import react-ios-scroll-lock
import {IosScrollLock} from 'react-ios-scroll-lock';
// Import css
import 'react-ios-scroll-lock/css';
Your content goes here
`
`javascript`
`javascript`
{createPortal(
Your content goes here
document.body
)}
`javascript`
`javascript`
// or
// or
`javascript``
Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.