Scroll-padding - CSS Property

Syntax diagram of scroll-padding.

Description of the scroll-padding property.

The property scroll-padding applies to a scrolling container. It defines the inner margins of this container when it comes to scrolling. In other words, it reduces the dimensions of the display area. This can be useful when elements are positioned (see the property position) because they then appear on top of the rest of the content and hide part of it.

Here is an example. A scrollable area that has a fixed part at the top (menu) and at the bottom (footer). These two elements have a property position set to sticky: they therefore do not scroll with the text and are on top of it. In the first example, on the left, you can see that there are always one or two lines of text that have not been read yet and are still hidden by these banners. In the example on the right with scroll-padding we have solved the problem.

In other words, the inner scrolling padding reduce the size of the scrolling window, as shown in the diagrams below. A comparable mechanism is found for horizontal scrolling.

No inner scrolling padding.

With inner scrolling padding
in the vertical direction.

Also see the scroll-margin property and our explanations on scrolling with snap points (Scroll Snap), a precise mechanism for managing scrolling based on content: scrolling with snaps.

The property scroll-padding is a shorthand property for the four physical properties below:

• scroll-padding-top: top scroll padding.
• scroll-padding-right: right scroll padding.
• scroll-padding-bottom: bottom scroll padding.
• scroll-padding-left: left scroll padding.

Also see the following properties:

Language support.

If the text is not in a Latin language, it is recommended to use the following logical properties instead, which adapt to the writing style of the language used.

• scroll-padding-block-start: corresponds to the top scroll padding for Latin languages.
• scroll-padding-block-end: the bottom scroll padding for Latin languages.
• scroll-padding-inline-start: the left scroll margin for Latin languages.
• scroll-padding-inline-end: the right scroll margin for Latin languages.

As well as the two shorthand properties scroll-padding-block and scroll-padding-inline which allow you to define in a single declaration the values for start and for end.

Values for scroll-padding.

• scroll-padding: auto;

  The browser is free to choose whether or not to apply scrolling margins. Most often, the auto value corresponds to the absence of scrolling padding, but it is possible that browsers automatically apply padding corresponding to positioned elements likely to obscure the content.

• scroll-padding: 20px; scroll-padding: 20px 10px; scroll-padding: 20px 10px 15px; scroll-padding: 20px 10px 15px 15px;

  One to four values are accepted. They must be followed by one of CSS dimension units. If they are percentages, they will be evaluated relative to the corresponding dimension of the scroll window (height or width). The total percentage in a given direction must therefore be less than 50%, otherwise no further scrolling is possible.

  Here is how the values are assigned based on their number:

  • If only one value is specified, it applies equally to all four scroll margins.
  • If two values are specified, the first defines the top and bottom margins, and the second value defines the left and right margins.
  • When three values are specified, they define respectively the top margin, the left and right margins, and the bottom margin.
  • Finally, if all four values are specified, they each define margins, in the following order: top margin, right margin, bottom margin, left margin.
  
  A single value.

  
  Two values.

  
  Three values.

  
  Four values.
• scroll-padding: initial; (auto) scroll-padding: inherit; scroll-padding: revert; scroll-padding: revertLayer; scroll-padding: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, unset.

Animation of the scroll-padding property.

The animation of scroll-padding is possible but not very spectacular. Its effect is only visible when interacting with the scroll bar. There is therefore no continuous effect that would be visible at all times.

Access the scroll-padding property via a program

With Javascript, change the value of scroll-padding.

In JavaScript, it is possible to modify the inner scrolling margins by acting on the property scroll-padding. The language offers a syntax with the typical CSS notation, in kebab-case, and another syntax with the notation in camel-case.

let el = document.getElementById('id'); el.style['scroll-padding'] = '1vw'; // or let el = document.getElementById('id'); el.style.scrollPadding = '1vw';

With Javascript, read the value of scroll-padding.

The property must have been applied directly to the element itself via its style attribute, and not through a CSS selector. This code is the mirror image of the previous one.

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

With Javascript, read the computed value of scroll-padding.

The computed value is the one that results from the evaluation of the relative units (except the percentage) and the possible consideration of inherited values. If no value has been assigned to the element, either directly or by inheritance, the calculated value is equal to the initial value (auto in the case of scroll-padding).

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

With JQuery, change the value of scroll-padding.

With JQuery it is also possible to modify the size of the inner scrolling margins. The syntaxes are generally shorter than those of Javascript.


$('#id').css('scroll-padding', '1vw');
// or
$('#id').css('scrollPadding', '1vw');


With JQuery, read the computed value of scroll-padding.

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

Other code examples.

JavaScript and JQuery codes are provided on the page Javascript and CSS: adding a style sheet, adding or removing classes, etc.

Test it yourself.

The buttons below apply the entered value to the property scroll-padding and then display either the value as it was applied, or the computed value. This second option allows you to see how the value of scroll-padding is stored (serialized). It is particularly noticeable that percentages are correctly stored as percentages (see the chapter on inheritance in CSS). All other units are converted to pixels.

Simulator.

In this example, there are no fixed banners. The property scroll-padding is used only for aesthetic reasons: to avoid sticking the elements to the edge of the scrolling container.

Browsers compatibility with scroll-padding.

The property scroll-padding is well recognized by all major browsers.

1

scroll-padding
property

Estimated overall support.

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari

Safari sur IOS

Chrome

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the scroll-padding property.

• CSS Scroll Snap Module - Level 1

  This specification module defines the features regarding scrolling with snap positions. In other words, content-aligned scrolling, to prevent, for example, an image from being cut off at the top or bottom of its container.

  Regarding scroll-padding. First introduction to the scroll-padding property.
  

  March 26, 2015

  Working Draft.

  

  October 20, 2016

  Candidate Recommendation.

  

  

See also, regarding scrolls with snags.

Scrolling with snapping is described in the CSS Scroll Snap Module. The property scroll-padding and its derivatives, as well as all those related to the subject, are also present in this module.

Properties: