πŸ”„ CSS Overscroll-behavior Generator

EN δΈ­ζ–‡
← Back to Home

βš™οΈ Scroll Behavior Settings

Control scroll boundary behavior to prevent scroll chaining and pull-to-refresh.

πŸ‘οΈ Live Preview

Scroll down inside the box to the boundary and feel the overscroll behavior difference.

contain
πŸ“Œ Try scrolling down When content reaches the bottom, overscroll-behavior: contain prevents further scrolling to the page.
πŸ’‘ overscroll-behavior controls scroll chaining β€” stopping internal scroll from triggering page scroll.
πŸ”Ή auto β€” default, allows scroll propagation
πŸ”Ή contain β€” prevents chaining, keeps rubber-banding
πŸ”Ή none β€” completely prevents overscroll effects
⬇️ Scroll to the bottom to feel the difference.
β€” end β€”

πŸ’» CSS Code

πŸ“– CSS overscroll-behavior Explained

The overscroll-behavior property controls what happens when a scroll container reaches its scroll boundary. It solves the "scroll chaining" problem where scrolling past the boundary of a child element triggers the parent page to scroll.

Common Use Cases