scroll-behavior

Overview

The scroll-behavior property determines the style of scrolling for a scroll container when the scrolling is activated by navigation or CSSOM scrolling APIs. Essentially, it can either give you a swift jump to the desired location or a smoother, more gradual one.

Examples and Usage

In the following example, we're illustrating how the scroll-behavior property can be leveraged to create a smoother scrolling transition within a navigational context.

HTML Structure

<nav>
  <a href="#A">HTML</a>
  <a href="#B">CSS</a>
  <a href="#C">PHP</a>
</nav>

<div class="scroll-container">
  <section id="A">HTML</section>
  <section id="B">CSS</section>
  <section id="C">PHP</section>
</div>

CSS Styling

/* Styling the navigation bar */
nav {
  background-color: #FBBF24; /* Navigation bar color */
  display: block; /* Block display */
  padding: 15px 0; /* Vertical padding */
  text-align: center; /* Centering text */
  width: 300px; /* Navigation bar width */
}

/* Styling the navigation links */
nav a {
  color: #FFFFFF; /* Link color */
  margin: 0 20px; /* Horizontal margins */
  text-decoration: none; /* Removing underline */
}

/* Styling the scroll container */
.scroll-container {
  background-color: #F0F8FF; /* Scroll container color */
  display: block; /* Block display */
  height: 300px; /* Scroll container height */
  width: 300px; /* Scroll container width */
  text-align: center; /* Centering text */
  overflow-y: scroll; /* Enabling vertical scroll */
  scroll-behavior: smooth; /* Setting smooth scroll behavior */
}

/* Styling the sections within the scroll container */
section {
  display: flex; /* Flex display */
  align-items: center; /* Vertical center alignment */
  justify-content: center; /* Horizontal center alignment */
  height: 100%; /* Full height */
}

In the setup above, the .scroll-container serves as our scrollable area with dimensions set to 300px by 300px purely for demonstration purposes. When a user clicks on a link in the navigation bar, they are smoothly scrolled to the corresponding section within the .scroll-container. This effect is controlled by the scroll-behavior property set to smooth.

Values

Tips and Tricks

• It's important to note that the scroll-behavior property does not affect scrolls triggered by the user, it only applies to programmatic scrolls.

• When scroll-behavior is set on the root element, it influences the viewport instead of it.

• Applying scroll-behavior to the body element does not impact the viewport.

• Keep in mind that browser support can be patchy for the scroll-behavior property, so always consider fallbacks or alternatives for specific unsupported, or partially supported browser versions.

Browser Compatibility

For a detailed breakdown of partial support nuances in specific browser versions, refer to the first link in the Useful Resources below.

Caution: Early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: scroll-behavior

W3C's Editor's Draft of CSS Overflow Module Level 3: scroll-behavior