The latest articles on Forem by Arsen Mkrtchyan (@stripearmy). https://forem.com/stripearmy https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3030793%2F31cee5a4-a210-4e6f-9a6f-d8d7bd53f923.png https://forem.com/stripearmy en Arsen Mkrtchyan Tue, 08 Apr 2025 16:12:19 +0000 https://forem.com/stripearmy/i-fixed-ios-safaris-scroll-lock-bug-with-just-css-and-made-a-react-package-for-it-2o41 https://forem.com/stripearmy/i-fixed-ios-safaris-scroll-lock-bug-with-just-css-and-made-a-react-package-for-it-2o41 <p>If you've ever tried to disable body scrolling in iOS Safari when a modal opens... you know the pain.</p> <p>Most workarounds involve JavaScript, touchmove event listeners, or weird side effects. I wanted something simpler — so I built <a href="https://www.npmjs.com/package/react-ios-scroll-lock" rel="noopener noreferrer">react-ios-scroll-lock</a>: a CSS-only scroll lock component that works across iOS, Android, and all major browsers.</p> <p>Why it’s different:</p> <p>⚡️ Pure CSS – no JS scroll hacks</p> <p>🧘 Doesn’t interfere with touch or scroll events</p> <p>📱 Works on iOS, Android, and desktop</p> <p>🪶 Minimal performance cost</p> <p>🧩 Easy to plug into any React project</p> <p>Demo:<br> 👉 <a href="http://stripearmy.github.io/ios-scroll-lock-demo/" rel="noopener noreferrer">Live demo here</a> (just open the menu)</p> <p>👉 <a href="http://stripearmy.github.io/ios-scroll-lock-demo/simple.html" rel="noopener noreferrer">Simple modal demo</a></p> <p>👉 <a href="http://stripearmy.github.io/ios-scroll-lock-demo/scrollable.html" rel="noopener noreferrer">Scrollable modal demo</a></p> <p>How it works:<br> I wrote a detailed post on the technique and the problem it solves here:<br> 📝 <a href="https://stripearmy.medium.com/i-fixed-a-decade-long-ios-safari-problem-0d85f76caec0" rel="noopener noreferrer">Medium Post</a></p> ios safari scroll