Scroll-behavior - Property CSS
Summary of characteristics of the scroll-behavior property
smooth | autoautoNot animable : the scroll-behavior property cannot be animated.Syntax diagram of scroll-behavior.
scroll-behavior propertyThe links in the diagram provide access to more details.
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.
Global values
(common to all properties):
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.
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.
Browser support (compatibility).
Support for scroll-behavior is good, except on Internet Explorer but this browser is hardly used anymore.
scroll-behaviorproperty
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
scroll-behavior property historic.
-
CSS Overflow Module Level 3
First presentation of thescroll-behaviorproperty.
April 18, 2013Working 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.
Properties:
