Prevent scrolling in box from overflowing to background elements with CSS

2020-03-19

There are three values to choose from when using the overscoll-behavior CSS property: auto, contain, and none. All are presented in the graphic below, although the difference between contain and none is not obvious here.

The auto value means that once the user reaches the end of the scrollable content in the element, either at the top or the bottom, then browser will overflow the scroll and start scrolling container elements with scrollable content or the viewport. This is the default behavior. It also means that on devices that have a ‘pull-to-refresh’ effect or a bounce effect when the end of the scrollable content is reached will retain these effects.

The contain value will, likewise, retain these effects; however, it will not overflow the scroll event to containing elements. The user must scroll outside the area of the current container in order to scroll underlying elements.

Finally, the none value drops both the scroll-related effects (e.g. bounce and pull-to-refresh) as well as prevents scroll events from overflowing into underlying elements.

HTML:

<div id="overscroll-behavior-example" class="example-block">
	<div class="overscroll-content">
		<div class="overscroll-behavior-auto">
			<div>overscroll-behavior: auto</div>
		</div>
		<div class="overscroll-behavior-contain">
			<div>overscroll-behavior: contain;</div>
		</div>
		<div class="overscroll-behavior-none">
			<div>overscroll-behavior: none</div>
		</div>
	</div>
	<div class="footer">Footer</div>
</div>

CSS:

#overscroll-behavior-example {
	position: relative;
	padding: 0;
}

#overscroll-behavior-example .overscroll-content {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	font-size: .85em;
	color: black;
	overflow: hidden scroll;
	height: 250px;
}

#overscroll-behavior-example .overscroll-content > div {
	height: 150px;
	overflow: hidden scroll;
}

#overscroll-behavior-example .overscroll-content > div > div {
	height: 200px;
	background: linear-gradient(#c1f2bc, #fff7cc);
	display: grid;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#overscroll-behavior-example .overscroll-behavior-auto {
	overscroll-behavior: auto;
}

#overscroll-behavior-example .overscroll-behavior-contain {
	overscroll-behavior: contain;
}

#overscroll-behavior-example .overscroll-behavior-none {
	overscroll-behavior: none;
}

#overscroll-behavior-example .footer {
	display: grid;
	justify-content: center;
	align-items: center;
	height: 140px;
	background-color: #333;
	color: #ccc;
}