overflow-anchor
overflow-anchor は CSS のプロパティで、コンテンツの移動を最小化するためにスクロール位置を調整する、ブラウザーのスクロール固定の動作をオプトアウトする方法を提供します。
スクロール固定の動作は、対応しているすべてのブラウザーで既定で有効になっています。したがって、このプロパティを変更するのは通常、文書または文書の一部でスクロール固定によって操作上の問題が発生し、この動作をオフにする必要がある場合のみです。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 56 | 79 | 66 | Preview | 56 | | |
auto | 56 | 79 | 66 | | 56 | |
none | 56 | 79 | 66 | | 56 | |
基本構文
CSS
.dynamic-content {
overflow-anchor: none;
}
.stable-content {
overflow-anchor: auto;
}ライブデモ
実務での使いどころ
-
動的コンテンツ挿入時のスクロール安定化
ニュースフィードや無限スクロールで新しいコンテンツが挿入されても、ユーザーの閲覧位置がずれないようにします。
注意点
- 2026年3月時点でSafariでは未サポートです。Chrome、Firefox、Edgeで利用可能です。
アクセシビリティ
- 意図しないスクロール移動はユーザーの方向感覚を失わせるため、スクロールアンカリングを適切に設定してユーザー体験を安定させてください。