overflow-anchor

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

overflow-anchorCSS のプロパティで、コンテンツの移動を最小化するためにスクロール位置を調整する、ブラウザーのスクロールアンカリングの動作をオプトアウトする方法を提供します。

スクロールアンカリングの動作は、対応しているすべてのブラウザーで既定で有効になっています。したがって、このプロパティを変更するのは通常、文書または文書の一部でスクロールアンカリングによって操作上の問題が発生し、この動作をオフにする必要がある場合のみです。

試してみましょう

構文

css
/* キーワード値 */
overflow-anchor: auto;
overflow-anchor: none;

/* グローバル値 */
overflow-anchor: inherit;
overflow-anchor: initial;
overflow-anchor: revert;
overflow-anchor: unset;

auto

その要素は、スクロール位置を調整するときにアンカー候補になります。

none

その要素はアンカー候補として選択されません。

公式定義

初期値auto
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

overflow-anchor = 
auto |
none

スクロールアンカリングを抑止

文書内でスクロールアンカリングを抑止する場合は、 overflow-anchor プロパティを使用してください。

css
* {
  overflow-anchor: none;
}

仕様書

Specification
CSS Scroll Anchoring Module Level 1
# exclusion-api

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overflow-anchor
auto
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support

関連情報