Skip to main content
Ben Nadel at Angular 2 Master Class (New York, NY) with: Rodrigo Kammer
Ben Nadel at Angular 2 Master Class (New York, NY) with: Rodrigo Kammer ( @rodkammer )

CSS overscroll-behavior Only Affects Scroll Containers

By on
Tags:

Four years ago, I discovered the overscroll-behavior CSS property and it rocked my world! This CSS property prevents a scroll operation from bubbling up to its parent container once a local scroll maxima/minima is reached (a behavior known as "scroll chaining"). What I didn't realize at the time, however, is that the overscroll-behavior property only applies to "scroll containers". That is, it only applies to elements that have a scrollbar / scrolling content. As such, it has no effect whatsoever on non-scrolling containers.

Run this demo in my JavaScript Demos project on GitHub.

View this code in my JavaScript Demos project on GitHub.

To see this divergent effect in the browser DOM (Document Object Model), let's create a simple page that has a two-panel modal window. In this modal, the top panel (header) is not a scrolling container whereas the body panel is. Both panels will have the overscroll-behavior property applied to it; but, it will only have a tangible affect on the scrolling panel:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="./main.css" />
	<style type="text/css">

		.modal {
			display: flex ;
			flex-direction: column ;
		}

		.modal__header {
			flex: 0 0 auto ;
			overscroll-behavior: contain ; /* !! NOT !! on a SCROLL CONTAINER. */
		}

		.modal__body {
			flex: 1 1 auto ;
			overflow: auto ;
			overscroll-behavior: contain ; /* Is on a SCROLL CONTAINER. */
		}

	</style>
</head>
<body>

	<h1>
		CSS overscroll-behavior Only Affects Scroll Containers
	</h1>

	<!-- BEGIN: Modal (w/ Scrolling Body Panel). -->
	<section class="modal">
		<div class="modal__header">
			This is a modal
		</div>
		<div class="modal__body">
			<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
			<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
			<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
			<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
		</div>
	</section>
	<!-- END: Modal. -->

	<!-- Body content, lots of it, scrolling main page. -->
	<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
	<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
	<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
	<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>

</body>
</html>

As you can see from the <style> block, both panels in the modal have overscroll-behavior: contain on them. However, if we load this page in the browser and use the mouse wheel while over both of the panels, what we can see is that only the scrolling panel blocks and contains the scroll operation.

Body scrolling is only prevented when overscroll-behavior is used on a scrolling element.

As you can see, when I use my mouse wheel over the scrolling panel, the overscroll-behavior property successfully prevents the scroll operation from bubbling up to the main body. However, when I use my mouse wheel over the header panel - which has no overflow - the scroll operation bubbles up to the parent and ends up scrolling the main body.

The overscroll-behavior property is still awesome; but, I clearly had a big hole in my mental model for how it works.

Want to use code from this post? Check out the license.

Reader Comments

Post A Comment — I'd Love To Hear From You!

Post a Comment

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel