Tillitsdone
down Scroll to discover
CSS Scroll-Behavior Enhance User Experience
The CSS scroll-behavior property enhances user experience by allowing smooth scrolling animations.

Options include 'auto' for instant scrolling and 'smooth' for smooth transitions.
thumbnail

Introduction

The scroll-behavior CSS property defines how a scrolling box behaves when scrolling is triggered by navigation or CSSOM scrolling APIs. This property is great for creating smooth scrolling animations, making the user experience on a web page more enjoyable. By setting the scroll-behavior to smooth, users get a seamless transition when navigating through content.

This property is useful for web development and design, allowing developers to create more engaging and user-friendly interfaces. It’s important to note that scroll-behavior only affects scrolls initiated by navigation or CSSOM APIs, not manual scrolls. When applied to the root element, it changes the behavior of the entire viewport.

Specification

The scroll-behavior property is defined in the CSS Overflow Module Level 3 specification. This module outlines the behavior for scrollable elements, ensuring that the property works consistently across different browsers and platforms.

Syntax

The scroll-behavior property is easy to use and can be integrated into your CSS with simple syntax. Here it is:

scroll-behavior: auto;
scroll-behavior: smooth;

Additionally, you can use global values such as inherit, initial, revert, revert-layer, and unset:

scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: revert-layer;
scroll-behavior: unset;

The scroll-behavior property accepts two main keyword values: auto and smooth.

  • auto: This is the default value. The scrolling box will scroll instantly to the specified position.
  • smooth: This value makes the scrolling box scroll smoothly to the specified position, using a user-agent-defined easing function over a user-agent-defined period of time.

Values

The scroll-behavior property accepts specific keyword values that define how scrolling should occur. Here are the main values you can use:

  • auto: The scrolling box jumps instantly to the specified position. This is useful for immediate navigation.
  • smooth: Creates a smooth scrolling transition to the specified position. This enhances the user experience with a smooth and visually appealing scroll.

In addition to these keyword values, the scroll-behavior property also accepts global values:

  • initial: Sets the property to its initial value, which is auto.
  • inherit: Inherits the value from the parent element.
  • revert: Reverts the property to its default value if it is not already specified.
  • revert-layer: Similar to revert, but it only reverts the value within the current cascade layer.
  • unset: Resets the property to its natural value, which means it will behave as if the property was not set.

Formal Definition

The scroll-behavior property in CSS defines how a scrolling box behaves when scrolling is triggered by navigation or CSSOM scrolling APIs. This property allows developers to specify whether the scroll should be instant or smooth.

Key aspects of the scroll-behavior property include:

  • Initial Value: The initial value is auto. This means that, by default, the scrolling box will jump instantly to the specified position.
  • Applies To: The scroll-behavior property applies to scrolling boxes, such as div elements with overflow set to scroll or auto.
  • Inherited: The scroll-behavior property is not inherited from the parent element. Each scrollable element must have its own scroll-behavior value defined if a specific behavior is desired.
  • Computed Value: The computed value of the scroll-behavior property is the same as the specified value.
  • Animation Type: The scroll-behavior property is not animatable. It cannot be used in CSS animations or transitions.

Formal Syntax

The formal syntax for the scroll-behavior property is defined as follows:

scroll-behavior = auto | smooth;
  • auto: The scrolling box scrolls instantly to the specified position.
  • smooth: The scrolling box scrolls smoothly to the specified position using a user-agent-defined easing function over a user-agent-defined period of time.

Examples

To illustrate how the scroll-behavior property can be used in practice, let’s go through a couple of examples. These examples will showcase both the auto and smooth values, demonstrating their effects on scrolling behavior.

Example: Setting Smooth Scroll Behavior

In this example, we’ll create a simple webpage with a navigation menu that links to different sections of the page. We’ll use the scroll-behavior: smooth; property to ensure that scrolling to these sections is smooth.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>CSS scroll-behavior Property</title>
<style>
body {
scroll-behavior: smooth;
}
nav a {
display: inline-block;
width: 50px;
text-decoration: none;
font-size: 20px;
margin: 10px;
}
.scroll-container {
width: 350px;
height: 200px;
overflow-y: scroll;
margin: 20px auto;
}
.scroll-page {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3em;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<div class="scroll-container">
<div class="scroll-page" id="page-1">Page 1</div>
<div class="scroll-page" id="page-2">Page 2</div>
<div class="scroll-page" id="page-3">Page 3</div>
</div>
</body>
</html>

Explanation:

  • The body element is set to have a scroll-behavior of smooth, ensuring that any scrolling triggered by the navigation links will be smooth.
  • The navigation menu contains links to different sections (#page-1, #page-2, #page-3) within the scrollable container.
  • The scroll-container is a scrollable div with a fixed height, and each scroll-page represents a section within the container.

When you click on the navigation links, the page will smoothly scroll to the corresponding section.

Example: Setting Auto Scroll Behavior

In this example, we’ll set the scroll-behavior to auto, which will result in instant scrolling to the specified sections.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>CSS scroll-behavior Property</title>
<style>
body {
scroll-behavior: auto;
}
nav a {
display: inline-block;
width: 50px;
text-decoration: none;
font-size: 20px;
margin: 10px;
}
.scroll-container {
width: 350px;
height: 200px;
overflow-y: scroll;
margin: 20px auto;
}
.scroll-page {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3em;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<div class="scroll-container">
<div class="scroll-page" id="page-1">Page 1</div>
<div class="scroll-page" id="page-2">Page 2</div>
<div class="scroll-page" id="page-3">Page 3</div>
</div>
</body>
</html>

Explanation:

  • The body element is set to have a scroll-behavior of auto, which means that any scrolling triggered by the navigation links will be instant.
  • The navigation menu and scrollable container are identical to the previous example.

When you click on the navigation links, the page will instantly jump to the corresponding section without any smooth transition.

Browser Compatibility

The scroll-behavior property is widely supported across modern browsers, making it a reliable choice for enhancing the scrolling experience on web pages. However, it’s important to be aware of the specific versions and browsers that support this property to ensure compatibility with your target audience.

Here is a summary of the browser compatibility for the scroll-behavior property:

  • Google Chrome: Supported since version 61.0 (September 2017).
  • Mozilla Firefox: Supported since version 36.0 (February 2015).
  • Microsoft Edge: Supported since version 79.0 (based on Chromium).
  • Opera: Supported since version 48.0 (September 2017).
  • Safari: Supported since version 15.4.

Note: Internet Explorer does not support the scroll-behavior property.

While the scroll-behavior property is supported in most modern browsers, it’s always a good practice to test your website across different environments to ensure consistent behavior. If you need to support older browsers or environments that do not support this property, consider providing fallback solutions or using polyfills to achieve similar effects.

FAQs

What is the scroll-behavior property in CSS?

The scroll-behavior property in CSS defines how a scrolling box behaves when scrolling is triggered by navigation or CSSOM scrolling APIs. It determines whether the scrolling is instant (auto) or smooth (smooth). This property is particularly useful for enhancing the user experience by providing smooth scrolling animations.

How can I enable smooth scrolling on a web page?

To enable smooth scrolling on a web page, you can use the scroll-behavior: smooth; property. This makes all scroll actions, like anchor clicks or JavaScript scrolling, transition smoothly. You can apply this property to the html or body element to affect the entire page, or to specific scrollable elements like div or section.

Does the scroll-behavior property work in all browsers?

The scroll-behavior property is supported in most modern browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, and Safari. However, it may not work in some older versions or in Internet Explorer. It’s always a good practice to test your website across different environments to ensure consistent behavior.

Can scroll-behavior be applied to individual elements?

Yes, the scroll-behavior property can be applied to individual scrollable elements, such as div or section, by setting it in the element’s style. This allows you to control the scrolling behavior of individual elements independently of the entire page.

Example

Here’s a simple example of how to use the scroll-behavior property:

html {
scroll-behavior: smooth;
}
/* Apply smooth scrolling to a specific element */
.scrollable-div {
overflow: auto;
scroll-behavior: smooth;
}

This CSS will make the entire page and the .scrollable-div element scroll smoothly.

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.