mdn
scroll-padding demo could better highlight how useful the property is
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-padding
What specific section or headline is this issue about?
Try it | CSS Demo: scroll-padding
What information was incorrect, unhelpful, or incomplete?
The description of the property says:
This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars),
but the demo doesn't include such case, and clicking through the different values in the demo doesn't change anything visually, making it hard to understand the benefit of the property.
What did you expect to see?
A fixed-positioned element in the demo that would obscure some content when the scroll-padding value is set to 0, but would not if the scroll-padding value is set to another value
Do you have any supporting links, references, or citations?
No response
Do you have anything more you want to share?
No response
MDN metadata
Page report details
- Folder:
en-us/web/css/reference/properties/scroll-padding - MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-padding
- GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/reference/properties/scroll-padding/index.md
- Last commit: https://github.com/mdn/content/commit/85fccefc8066bd49af4ddafc12c77f35265c7e2d
- Document last modified: 2025-11-07T15:58:06.000Z
Thanks for filing this issue, @nchevobbe.
For whoever takes this on, there is room to add examples to the "Examples" section (which is currently missing) to better demo what this property can achieve.
scroll-padding is also applied for scrollIntoView() and when scrolling as part of a fragment navigation.
https://software.hixie.ch/utilities/js/live-dom-viewer/saved/14346
