CSS overflow-anchor Property

What You’ll Learn

The overflow-anchor property controls scroll anchoring, which keeps your reading position stable when content above you changes on the page.

Introduction

The overflow-anchor property in CSS is designed to control the behavior of scroll anchoring, which is a feature that helps maintain the user’s scroll position when content changes dynamically.

This property ensures that the user’s view remains consistent and predictable when elements on the page are resized or added. This is particularly useful for improving the user experience on pages where content is dynamically loaded or updated.

Definition and Usage

Imagine reading a long feed while an image or ad loads above your current position. Scroll anchoring tries to keep the same content in view so the page does not jump unexpectedly.

Use overflow-anchor: none when that automatic adjustment causes problems in a custom scroll area or specialized UI.

📝 Syntax

The overflow-anchor property can be applied to any scrollable element. The syntax is as follows:

element {
  overflow-anchor: auto | none;
}

Here, the value can be auto or none.

Basic Example

.dynamic-content {
  overflow-anchor: none;
  overflow-y: auto;
}

Syntax Rules

• auto lets the browser apply scroll anchoring when appropriate.
• none disables scroll anchoring for that element.
• Most useful on scroll containers with changing content above the viewport.
• Works alongside overflow, not as a replacement for it.

🎯 Default Value

The default value of the overflow-anchor property is auto. This means that the browser will apply default scroll anchoring behavior.

In most cases you do not need to change this unless anchoring causes unwanted scroll adjustments.

💎 Property Values

Examples Gallery

Disable anchoring on dynamic panels, keep defaults, and compare use cases.

<style>
  .dynamic-content {
    overflow-anchor: none;
    height: 200px;
    border: 1px solid #ccc;
    overflow-y: auto;
  }
</style>

<div class="dynamic-content">
  <p>Content that might change...</p>
</div>

.article {
  overflow-anchor: auto;
}

.feed {
  max-height: 320px;
  overflow-y: auto;
  overflow-anchor: auto;
}

.sortable-list {
  overflow-y: auto;
  overflow-anchor: none;
}

Works with overflow scroll containers

overflow-anchor does not create scrolling by itself. It affects how scroll position behaves inside containers that already use overflow.

.panel {
  height: 240px;
  overflow-y: auto;
  overflow-anchor: none;
}

♿ Accessibility

• Reduce unexpected movement — Scroll anchoring can help users with vestibular sensitivity by limiting jarring jumps.
• Test dynamic updates — Ensure content changes do not hide focused or important information.
• Do not disable without reason — Turning off anchoring may reintroduce layout jumps.
• Pair with clear loading states — When content shifts, visual feedback helps all users.

💡 Best Practices