No Login Data Private Local Save

overscroll‑behavior Tester - Online Prevent Pull‑to‑Refresh

23
0
0
0

overscroll-behavior Tester

Test and compare how overscroll-behavior CSS property prevents pull-to-refresh and scroll chaining.

Best experienced on mobile — try scrolling each phone simulator to the edge!

Apply to This Page
Set body { overscroll-behavior-y: none; } to prevent pull-to-refresh on this entire page. Try it on mobile!
9:41
⬆ Overscroll may propagate
⬇ Overscroll may propagate
← Horizontal overscroll-behavior-x: auto →
overscroll-behavior: auto
Default — allows scroll chaining & pull-to-refresh
9:41
⬆ Scroll chain blocked
⬇ Scroll chain blocked
← Horizontal overscroll-behavior-x: contain →
overscroll-behavior: contain
Blocks scroll chaining, keeps elastic effect
9:41
✓ Overscroll fully prevented
✓ Overscroll fully prevented
← Horizontal overscroll-behavior-x: none →
overscroll-behavior: none
Prevents all overscroll & pull-to-refresh
auto Default

Over-scroll effects propagate to ancestor scroll containers. Pull-to-refresh is enabled on mobile. Best for general web pages.

overscroll-behavior: auto;
contain Balanced

Stops scroll chaining to parent elements. The element retains its own elastic bounce effect. Great for modals & sidebars.

overscroll-behavior: contain;
none Strict

Completely disables over-scroll effects and scroll chaining. Prevents pull-to-refresh on mobile. Ideal for PWAs and full-screen apps.

overscroll-behavior: none;

Frequently Asked Questions

overscroll-behavior is a CSS property that controls what happens when a user scrolls past the boundary of a scrollable area. By default (auto), the scroll momentum "chains" to parent containers and can trigger browser-level actions like pull-to-refresh on mobile. Using contain or none gives you fine-grained control over this behavior, improving UX for modals, drawers, and single-page applications.

overscroll-behavior-y: none is the most effective way to prevent pull-to-refresh. It tells the browser not to perform any default overscroll action, including the pull-to-refresh gesture in Chrome for Android and the rubber-band effect in iOS Safari. Use contain if you want to keep the elastic bounce within the element but stop it from triggering a page-level refresh.

  • contain: The element still shows its own overscroll bounce/glow effect, but the scroll chain is broken — the parent won't scroll. Pull-to-refresh behavior varies by browser; some may still trigger it.
  • none: No overscroll effect at all. The scroll hits a hard boundary. Scroll chaining is disabled. Pull-to-refresh is reliably prevented across all modern browsers.

Excellent support: Chrome 63+, Firefox 59+, Edge 79+, Opera 50+, Samsung Internet 8.2+. Safari added support in version 16 (iOS 16+ and macOS Ventura+). For older Safari versions, the property is ignored gracefully, so it's safe to use as a progressive enhancement. Check Can I Use for the latest data.

Common use cases:

  • Modals & drawers: Use overscroll-behavior: contain on the modal body so scrolling inside doesn't move the background page.
  • PWAs: Set body { overscroll-behavior-y: none; } to prevent accidental pull-to-refresh and make the app feel native.
  • Horizontal carousels: Use overscroll-behavior-x: contain to prevent horizontal swipe from triggering page navigation gestures.
  • Chat apps: Apply to message lists to prevent scroll chaining when users flick through conversations.

Yes! Applying overscroll-behavior-y: none to body or html prevents the entire page from triggering pull-to-refresh. This is commonly used in Progressive Web Apps (PWAs). Try the toggle above on your mobile device to experience it live on this very page.

Browser Support Overview

Browser Minimum Version Notes
Chrome63+Full support
Firefox59+Full support
Safari16+macOS Ventura & iOS 16+
Edge79+Chromium-based, full support
Opera50+Full support
Samsung Internet8.2+Full support
Pro Tip: On mobile, open this page and try pulling down on each phone simulator. The auto one may trigger your browser's pull-to-refresh, while none stays firm. Toggle the "Apply to This Page" switch to protect this entire page from accidental refresh!
🔧 Related Tools