CSS Overscroll Behavior
CSS Overscroll Behavior — Control scroll chaining, pull-to-refresh, and overscroll effects with the overscroll-behavior property. The guide walks through What Is Overscroll Behavior?, overscroll-behavior: contain, overscroll-behavior: none, Practical Scroll Container Patterns, Browser Support and Best Practices. The overscroll-behavior property controls what happens when a user scrolls past the boundary of a scrollable area. This includes scroll chaining (when scrolling reaches the end of one element and triggers scrolling of a parent element) and overscroll effects (like the rubber-banding or glow effect in mobile browsers). .element { overscroll-behavior: auto; } /* Default: allow chaining + effects */… contain prevents scroll chaining but allows overscroll effects within the element: .sidebar { overflow-y: auto; overscroll-behavior: contain; height: 100vh; } This is useful for sidebar navigation. When the user scrolls to the bottom of the sidebar, the scroll doesn't "chain" to the main page behind it. Modal dialogs: .modal-content { max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; /* Prevents background page…