The scroll-behavior property manages the behavior of scrolling when caused by navigation, or the invocation of a CSSOM scrolling method— scroll() , scroUTo() , scrollBy() , or scrollIntoView() . Other methods of scrolling, such as with a pointer device, aren’t affected by the scroll-behavior property.
Initially, the value of scroll-behavior is auto . This value causes an instant scroll. An instant scroll is less of a scroll and more of a jump to the desired location within the document. You can also use smooth , which causes what we generally think of as scrolling behavior: the content glides to the requested point.
1. What Is a Scrolling Box?
Smooth scrolling only works when the element has a “scrolling box”. An element or a viewport has a scrolling box when:
- the element or viewport has a scrolling mechanism
- the element overflows its content area and the used value of the overfLow-x or overfLow- y property is something other than hidden or clip
Here’s an example:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″> <title>scroll-behavior</title>
<style> ul {
display: flex;
list-style: none;
padding: 1rem;
gap: 1rem;
justify-content: center;
}
.scroll-container {
width: 50%; margin: auto;
/*
-
-
-
-
- When the container has a fixed height, its contents may
- overflow it
-
-
-
*/
height: 30rem;
/*
-
-
-
-
- Can also use ‘overflow’ as a property. Value can also be
- ‘scroll’
-
-
-
*/
overflow-y: auto;
scroll-behavior: smooth;
}
/*
* Remember, motion can make some people dizzy!
*/
@media screen and ( prefers-reduced-motion ) {
.scroll-container {
scroll-behavior: auto;
}
}
.scroll-container div {
/*
-
-
-
-
- Total height of child divs are large enough or contain
- enough content to overflow their parent container
-
-
-
*/
height: 50vh;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href=”#A”>A</a></li>
<li><a href=”#B”>B</a></li>
<li><a href=”#C”>C</a></li>
<li><a href=”#D”>D</a></li>
</ul>
</nav>
<div class=”scroll-container”>
<div id=”A”>A</div>
<div id=”B”>B</div>
<div id=”C”>C</div>
<div id=”D”>D</div>
</div>
</body>
</html>
Clicking any of the navigation links triggers a smooth, gliding-style scroll to the linked <div> .
For non-root elements, the element must have a fixed height, set using the height or max- height properties in order for scroll-behavior to have an effect. The value of overflow should also be scroll or auto . The root <htmL> element takes on the dimensions of the viewport. Content that exceeds the viewport dimensions creates both an overflow and a scrolling mechanism. As a result, scroll-behavior: smooth works for the <html> element without any additional properties.
The <body> element, however, is a bit of a special case. Body elements rarely generate a scrolling box, in part because content rarely overflows them. Body elements grow and shrink with the dimensions of their child content. That means if you apply scroll-behavior to a <body> element, you’ll also need to set the height , width , and overflow values of its parent. Applying scroll-behavior to the root element, on the other hand, works similarly, and requires fewer bytes.
Unfortunately, this version of the CSSOM specification didn’t include a way for developers to have control over how the page scrolls beyond smooth and “not-smooth” (better known as the auto value). We can’t use an easing function, or set a scroll duration.
Instead, scroLL-behavior: smooth uses a browser-defined timing function and duration. Depending on the browser, scroLL-behavior may also follow conventions of the operating system on which it runs. If you want to shape how the scroll works—for example, whether the timing function is Linear or ease-in , or how many milliseconds it should take—you’ll need to use JavaScript.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.