How to prevent page scroll when a modal is open in Webflow + the iOS Safari fix

The Webflow blog post walks readers through three practical ways to lock page scroll while a modal is displayed. The first two—simple CSS overscroll‑behavior and a jQuery toggle that adds overflow:hidden to html, body—work on Chrome, Firefox, Edge and most Android browsers, but they break on iOS Safari because Apple’s “rubber‑scrolling” treats scrolling as a native gesture that CSS cannot override. The author then presents a fourth, iOS‑safe implementation that combines JavaScript event handling with precise class naming (modal‑trigger, modal‑container, modal‑close) to intercept scroll events before they bubble to the page. By requiring a paid Webflow plan for custom code, the guide also highlights a limitation for hobbyists on the free tier.

This tutorial arrives at a moment when no‑code builders like Webflow, Wix, and Squarespace are competing to offer enterprise‑grade interactions without developers. As more e‑commerce sites rely on modals for product details, cart previews, and sign‑ups, the inability to block background scroll on iPhones—Apple’s most popular mobile platform—directly threatens conversion rates. The inclusion of Finsweet’s attribute‑based solution shows how third‑party ecosystems are filling gaps in Webflow’s native feature set, while the detailed iOS fix underscores the broader industry challenge of reconciling CSS limitations with native mobile gestures.

Designers and developers should treat scroll‑locking as a non‑negotiable UX requirement for any modal that influences purchase decisions. Relying solely on CSS or basic jQuery may pass desktop testing but will produce a jarring experience for iOS users, potentially inflating bounce rates. Teams must verify that their Webflow subscription permits custom scripts, audit all modal triggers for consistent class naming, and test on real iPhone/iPad devices rather than emulators. Future Webflow updates that natively support iOS‑compatible overflow handling could render these workarounds obsolete, so monitoring platform release notes is essential.