CSS overflow-anchor 属性

定義と使用方法

overflow-anchor この属性は、スクロールアンchor（scroll anchoring）を閉じるために使用されます。

スクロールアンchorは、新しいコンテンツが読み込まれる際に、既にビューポートにスクロールされているエリアが動かないようにするブラウザの機能です。これは通常、ネットワーク接続が遅い場合に問題となります。つまり、ユーザーがページが完全に読み込まれる前にページを下にスクロールし始める場合です。

例

スクロールアンchorを閉じます：

div {
  overflow-anchor: none;
}

自分で試してみてください

CSS文法

overflow-anchor: auto|none|initial|inherit;

属性値

値 説明
auto デフォルト値。スクロールアンchorを有効にします。
none スクロールアンchorを無効にします。
initial この属性をデフォルト値に設定します。参照してください。 initial。
inherit この属性は、親要素からこの属性を継承します。参照してください。 inherit。

技術的詳細

デフォルト値： auto
継承性： いいえ
アニメーション作成： サポートされていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript文法： object.style.overflowAnchor="none"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
56.0 79.0 66.0 サポートしていません 43.0

関連ページ

チュートリアル：CSS 溢出

参照：CSS overflow 属性