CSS :has Pseudo-class for Modal Scroll Locking

This article shows how to lock page scrolling when a modal is open by using the new CSS :has pseudo‑class—replacing JavaScript‑driven overflow toggles that fail with nested dialogs—and demonstrates a simple body:has(dialog[open]) selector that works across all modern browsers.

:has() selectorCSSJavaScript

0 likes · 4 min read

CSS :has Pseudo-class for Modal Scroll Locking

Tencent IMWeb Frontend Team

Jan 4, 2019 · Frontend Development

How to Stop Scroll‑Penetration in Mobile Web Overlays

This article explains why scroll‑penetration occurs when a modal mask covers the page, why simple overflow:hidden or event‑bubbling tricks fail, and provides a complete solution using passive event listeners, selective default‑preventing, multi‑layer handling, and a ready‑to‑use React component.

Mobile Webfrontendpassive event listeners

0 likes · 11 min read

How to Stop Scroll‑Penetration in Mobile Web Overlays