Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
overscroll-behavior property controls what happens when a user reaches the edge of a scrolling area. It prevents unwanted scroll chaining (where parent elements start scrolling) and browser bounce effects.Use overscroll-behavior: contain; on modal dialogs, side drawers, and chat interfaces to prevent the background page from scrolling when users reach the end of the scrollable content!
Prevents scroll chaining to parent elements. The scrolling stays within the element.
overscroll-behavior: contain;Normal browser behavior. Scroll continues to parent element and bounce effects work.
overscroll-behavior: auto;Prevents both scroll chaining AND bounce effects. Most restrictive option.
overscroll-behavior: none;overscroll-behavior-xControl horizontal overscroll only
overscroll-behavior-yControl vertical overscroll only
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Overscroll Behavior - Contain</title></head><body><div class="container"><h1>🖐️ Overscroll Behavior</h1><p class="subtitle">Prevent scroll chaining</p><div class="scroll-box"><div class="content"><h3 style="color:#f97316;margin-bottom:15px;">Scrollable Content</h3><p style="margin-bottom:15px;">Scroll within this box - the parent page won't scroll!</p><p>This demonstrates <strong>overscroll-behavior: contain</strong> which prevents scroll chaining. When you reach the bottom of this container, scrolling stops instead of continuing to the parent element.</p></div></div><div class="info-box"><p class="info-text"><strong>👆 Try scrolling!</strong> Notice how when you reach the end of the scrollable area, the background doesn't scroll. This is overscroll-behavior: contain in action!</p></div></div></body></html>Loading preview...
Prevent body scroll when modal is open
Contain scroll within side drawers
Keep chat scroll independent from page
Prevent parent scroll during swipe