overflow-anchor

概要

ページ内のコンテンツが動的に追加・削除された際に、現在のスクロール位置が不意にずれることを防ぐスクロールアンカリング機能を制御します。デフォルトで有効になっており、広告の読み込みや遅延コンテンツの挿入時にスクロール位置を安定させます。特定の要素をアンカリングの候補から除外することも可能です。

対応ブラウザ

基本構文

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

実務での使いどころ

• 動的コンテンツ挿入時のスクロール安定化

  ニュースフィードや無限スクロールで新しいコンテンツが挿入されても、ユーザーの閲覧位置がずれないようにします。

注意点

アクセシビリティ

• 意図しないスクロール移動はユーザーの方向感覚を失わせるため、スクロールアンカリングを適切に設定してユーザー体験を安定させてください。

参考リンク

• MDN Web Docs — overflow-anchor
• Can I use — overflow-anchor