`Scroll-behavior` - Property CSS

scroll-behavior

Summary of characteristics of the `scroll-behavior` property

Quick description

Chooses between a rough or gradual scrolling of the page.

Status

Standard

Applies to

scroll container.

Usable for

HTML

Predefined values

smooth | auto

Percentages

Not applicable.

Initial value

auto

Inherited by default

No.

Animation type

Not animable: the scroll-behavior property cannot be animated.

W3C Module

CSS Overflow Module

References (W3C)

CSS Overflow Module Level 3

Document status: WD (Working Draft)

Syntax diagram of `scroll-behavior`.

Syntax diagram of the scroll-behavior property.
The links in the diagram provide more details about the values.

Description of the `scroll-behavior` property.

scroll-behavior defines how scrolling is done when a link navigates within the page itself (bookmark). This scrolling can be either abrupt or gentle.

This property only applies to the document itself, i.e. to html or body tags, or to elements with scroll bars.

Values for `scroll-behavior`.

scroll-behavior: auto;

Default value. The document shifts abruptly to the requested position.
scroll-behavior: smooth;

The document moves smoothly to the requested position.
scroll-behavior: initial; (auto) scroll-behavior: inherit; scroll-behavior: revert; scroll-behavior: revertLayer; scroll-behavior: unset;

See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the `scroll-behavior` property.

No animation possible for scroll-behavior, which is understandable since the effect of this property is only visible for a very short time.

Manipulating the `scroll-behavior` property programmatically.

With Javascript, change the value of `scroll-behavior`.

Javascript accepts a syntax with the kebab-case notation, typical of CSS, and another with the camel-case notation. Here is a code example for each of these syntaxes.


	let el = document.getElementById('id');
	el.style['scroll-behavior'] = 'smooth';
	// or
	let el = document.getElementById('id');
	el.style.scrollBehavior = 'smooth';

With Javascript, read the value of `scroll-behavior`.

The code below retrieves the value of the property if it has been assigned directly to the element itself via its style attribute, and not through a CSS selector.


	let el = document.getElementById('id');
	let value = el.style['scroll-behavior'];
	// or
	let el = document.getElementById('id');
	let value = el.style.scrollBehavior;

With Javascript, read the calculated value of `scroll-behavior`.

The computed value is the one that results from the inheritance cascade. If the scroll-behavior property has not been defined on the element, or on any of its parents, then the computed value is the initial value: auto in the case of scroll-behavior.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('scroll-behavior');

With JQuery, change the value of `scroll-behavior`.


 $('#id').css('scroll-behavior', 'smooth');
 // or
 $('#id').css('scrollBehavior', 'smooth');

With JQuery, read the calculated value of `scroll-behavior`.


	let value = $('#id').css('scroll-behavior');

Test it yourself.

The buttons below apply the entered value to the scroll-behavior property and then display either the value as applied, or the computed value, which will not make a difference in the case of scroll-behavior.

Simulator.

To understand the effect of the scroll-behavior property, first choose a value below, then click on one of the top of page or end of page links, which will necessarily require scrolling the page.

You can also observe what happens on an element with scroll bars.

scroll-behavior :

smooth

auto

Jump to the end of this text.

The effect of scroll-behavior is also visible on elements with a scroll bar (see the overflow property to make it appear).
Click on the links to go to the beginning or end of this text, and observe how the latter scrolls, depending on the value given to scroll-behavior.

Note: The first click usually causes a scroll in the element itself, but also a scroll of the entire page, which makes it difficult to see what is happening.

Return to the beginning of this text.

Browsers compatibility with `scroll-behavior`..

Support for scroll-behavior is good, except on Internet Explorer but this browser is hardly used anymore.

Column 1

Browser support for the scroll-behavior property, which specifies either instant or smooth scrolling from one place to another on the page.

scroll-behavior
property

Estimated overall support.

94%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `scroll-behavior` property.

CSS Overflow Module Level 3

First presentation of the scroll-behavior property.

April 18, 2013
Working Draft.

See also, regarding the management of overflows and scrolling.

The CSS Overflow Module specification module groups together everything related to content overflows and scrolling (scroll bars). The scroll-behavior property, as well as the following ones, are described in this module.