When a user scrolls inside your modal, drawer, sheet, or bottom-card and hits the edge, the page underneath starts scrolling too. On iOS Safari it's especially jarring because the bounce momentum carries through. On Android it can dismiss the keyboard mid-input. On desktop it makes the modal feel cheap. The fix is one CSS line per scroll container: overscroll-behavior: contain. The browser support is universal in 2026. Every modern framework's starter template still ships without it because the bug is invisible on desktop where most developers test. ScrollPunk finds every place this is happening in your code.
The default value of overscroll-behavior on every element in every browser is auto — which means when you scroll past an element's edge, the scroll signal chains to its scrollable ancestor, and so on up to the document. For a modal sitting on top of a long page, this means scrolling inside the modal eventually scrolls the page underneath it. Users perceive this as "the modal feels broken" or "my place got lost when I dismissed the keyboard." The W3C added overscroll-behavior: contain specifically to stop the chain. Every modern browser supports it. Almost no design system or framework ships it by default. Tailwind UI doesn't. Radix doesn't. Headless UI doesn't. shadcn/ui doesn't. Your codebase almost certainly has this bug right now in at least one scroll container.
overscroll-behavior as of 2026 · caniuseoverscroll-behavior: contain per scroll container fixes every occurrence in your codebase · git-reversiblePLAIN ENGLISH Every browser defaults to "let scroll past the edge of this element chain into the next scrollable thing up the tree." That made sense in 1999 when browsers were just documents. It does not make sense in 2026 when modals, sheets, drawers, and bottom cards are normal UI patterns and a single scroll gesture should stay inside the thing the user is interacting with. The W3C fixed this by adding overscroll-behavior: contain — but the fix is opt-in, and almost no design system has opted in for you. ScrollPunk finds every spot in your codebase where you're shipping the 1999 default and emits the one-line declaration that stops the bleed.
Paste any chunk of your page that has scroll containers — modals, drawers, sheets, sidebars, comment threads, anywhere users scroll inside something that isn't the whole page. We render it in a sandboxed iframe inside your browser, walk every element with overflow: auto/scroll/hidden, check the computed overscroll-behavior, and flag the ones still on the bleed-prone default. Zero upload, zero storage, zero AI. Pure DOM traversal.
Your pasted HTML loads into a hidden, script-disabled iframe inside your browser tab. Nothing leaves the page. The iframe is destroyed the moment the audit completes.
For every element where getComputedStyle shows overflow, overflow-x, or overflow-y set to auto or scroll (and overlay-style for fixed/absolute with sufficient coverage), we read the computed overscroll-behavior-x and overscroll-behavior-y. If either is still on the default auto, the container will bleed.
Positioned overlays (modals, drawers, sheets) get flagged BLEEDS. Inline scroll containers (sidebars, lists, threads) get flagged CHAINS. Each one gets the patch: overscroll-behavior: contain scoped to that selector. Copy button included. Git-reversible. Browsers that pre-date the spec ignore the line; modern browsers stop the chain.
ScrollPunk is the sixth product in the Punk Store. PalettePunk audits color. StickyPunk finds sticky-positioning failures. KeyboardPunk fixes mobile inputs the iOS keyboard hides. SelectPunk catches Firefox-broken dropdowns. AnchorPunk finds ghost-tethered absolute elements. Six products today. More shipping this quarter. The Punk Pass gets you all of them — current and future — for less than the cost of buying three separately.
No subscription. No login wall. No "contact sales." Buy once, own forever, use on every project you ever ship.
overscroll-behavior: contain per scroll container, all git-reversibleCSS Box Model Module Level 4, "overscroll-behavior" property. Shipped in Chrome 63 (2017), Firefox 59 (2018), Safari 16 (2022). Baseline support since Safari 16 in 2022 — effectively universal in 2026.
Yes. Nothing uploads. The pasted HTML loads into a sandboxed iframe inside your tab. We walk the DOM using standard getComputedStyle() queries. View source — the scanner is in /scan.js, vanilla JS, zero dependencies.
contain versus none — which one should I use?contain stops scroll chaining without blocking the browser's pull-to-refresh on the document. Use this for modals, drawers, sheets. none additionally disables pull-to-refresh — use it when you want to fully sandbox the scroll behavior (e.g. a custom mobile UI that should never refresh the page). ScrollPunk defaults the patch to contain because it's the safer recommendation for most cases.
No. overscroll-behavior is an unknown property to pre-2017 browsers, and unknown CSS properties are silently ignored. Pure additive enhancement. Modern browsers stop the chain; older ones just behave like they always did.
overflow: hidden elements?Technically overflow: hidden elements aren't scrollable, but in many modal/sheet patterns the developer uses overflow: hidden on a wrapper and a scrollable child inside it. ScrollPunk flags both the parent (because the bleed risk is real if any descendant scrolls) and the scrollable children. The patch goes on whichever element is the actual scroll container.
Yes. Same Radio Art LLC, same engineering, same lifetime-license model. Punk Pass at $299 pays for itself by your third Punk.