jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

CSS Overscroll Behavior Generator

Pick a scenario such as body, modal, sidebar, or carousel, and choose the overscroll behavior. Copy the CSS to prevent unwanted pull-to-refresh and scroll chaining on mobile.

Loading tool...

What is CSS Overscroll Behavior Generator?

overscroll-behavior controls what happens when a scrollable area reaches its boundary. On mobile devices, overscrolling can trigger pull-to-refresh or let scroll bleed from a modal into the page behind it. This property lets you contain or prevent overscroll effects on body, modal, sidebar, and carousel elements.

Quick answer

Control what happens when a scrollable element reaches its boundary. Use contain to stop scroll chaining while keeping the bounce effect, or none to remove all overscroll effects including pull-to-refresh.

Limitations

  • Overscroll-behavior is primarily a mobile concern. Desktop browsers apply minimal or no overscroll effects, so the property has little visible impact on desktop.
  • Testing overscroll-behavior on desktop requires device emulation in DevTools because mouse scroll behavior differs significantly from touch gestures.

How to use this tool

  1. Select a scenario that matches where you want to control overscroll behavior.
  2. Choose the behavior: contain to stop scroll chaining but keep the bounce, or none to prevent all overscroll effects.
  3. Select the axis if you only want to control horizontal or vertical overscroll separately.
  4. Copy the CSS and test on a real mobile device to confirm the expected behavior.

What you can use it for

  • Prevent pull-to-refresh on a page body while keeping vertical scroll working.
  • Stop background page scroll when a modal or drawer is open.
  • Contain horizontal scroll in a carousel so it does not trigger back/forward navigation.

Use cases

Practical examples

Example

Prevent pull-to-refresh

A web app page wants to disable pull-to-refresh while keeping normal scrolling. overscroll-behavior: contain on body stops the refresh gesture without blocking the scroll.

Example

Modal with scroll lock

A modal dialog has its own scrollable content. overscroll-behavior: contain on the modal overlay prevents scroll from bleeding into the page behind it.

Common mistakes

  • Applying overscroll-behavior: none to the body element, which disables pull-to-refresh entirely and may frustrate mobile users.
  • Setting overflow: hidden on body for modal scroll locking instead of using overscroll-behavior.
  • Forgetting to test on real mobile devices where overscroll effects differ from desktop emulation.

Verification

  1. Test the behavior on a real mobile device by scrolling past the boundary of the target element and confirming the expected pull-to-refresh or scroll chain behavior.
  2. Use Chrome DevTools device mode with touch emulation enabled to approximate mobile overscroll behavior on desktop.

FAQ

Questions about CSS Overscroll Behavior Generator

What is the difference between contain and none?

contain stops scroll chaining to the parent but keeps the visual bounce or glow effect at the boundary. none prevents both the chaining and the visual overscroll effect.

Should I use overscroll-behavior instead of overflow: hidden for modals?

overscroll-behavior is better for preventing scroll bleed while keeping the modal scrollable. Use it together with a position fixed technique, not instead of it.

Does overscroll-behavior affect pull-to-refresh?

Yes. overscroll-behavior: contain on the body element prevents the browser pull-to-refresh gesture while still allowing normal page scrolling. This is useful for web apps that handle refresh or navigation themselves.

Can I apply different values to x and y?

Yes. Use the two-value syntax overscroll-behavior: contain auto to set different behaviors for each axis. The first value applies to the x axis and the second value applies to the y axis.

Related tools

More css tools

Also try

Also try