ContextQMD
Back to Content

CSS scroll anchoring

files/en-us/web/css/guides/scroll_anchoring/index.md

latest1.3 KB
Original Source

The CSS scroll anchoring module defines a mechanism to prevent page movement due to DOM changes above the visible region of a scrolling box while the user is consuming the visible content.

Scroll anchoring attempts to keep the user's view of the document stable across layout changes. It works by selecting a DOM node (the anchor node) whose movement is used to determine adjustments to the scroll position. The anchor node is always a descendant of the scrolling box.

For scroll containers that are snapped to an element, scroll anchoring is limited to adjustments that would be allowed by re-snapping.

Reference

Properties

  • {{cssxref("overflow-anchor")}}

Glossary terms

  • {{glossary("Scroll container")}}
  • {{glossary("Scroll snap")}}

Guides

  • Overview of scroll anchoring
    • : What is scroll anchoring, suppression triggers, and when and how to enable and disable this browser feature.
  • {{CSSxRef("overscroll-behavior")}}

Specifications

{{Specifications}}

See also