overflow-anchor
Quick Summary for overflow-anchor
The
overflow-anchor
CSS property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.
Code Usage for overflow-anchor
/* Keyword values */ overflow-anchor: auto; overflow-anchor: none; /* Global values */ overflow-anchor: inherit; overflow-anchor: initial; overflow-anchor: revert; overflow-anchor: unset;
More Details for overflow-anchor
overflow-anchor
The overflow-anchor
CSS property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.
Scroll anchoring behavior is enabled by default in any browser that supports it. Therefore, changing the value of this property is typically only required if you are experiencing problems with scroll anchoring in a document or part of a document and need to turn the behavior off.
Syntax
/* Keyword values */ overflow-anchor: auto; overflow-anchor: none; /* Global values */ overflow-anchor: inherit; overflow-anchor: initial; overflow-anchor: revert; overflow-anchor: unset;
Values
auto
The element becomes a potential anchor when adjusting scroll position.
none
The element won't be selected as a potential anchor.
Formal definition
Initial value | auto |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
auto | none
Examples
Prevent scroll anchoring
To prevent scroll anchoring in a document, use the overflow-anchor
property.
* { overflow-anchor: none; }
Specifications
Specification |
---|
CSS Scroll Anchoring Module Level 1 # exclusion-api |
See also
Guide to scroll anchoringLast modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)Français日本語中文 (简体) Change language Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline