CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのoverflow-anchorプロパティでスクロールアンカーを無効化する方法

Webブラウザには、コンテンツの読み込み中にページが勝手にジャンプするのを防ぐための「スクロールアンカー（scroll anchoring）」という機能が標準で備わっています。しかし、場合によってはこのデフォルトの動作が邪魔になることもあります。そのようなときは、CSSのoverflow-anchorプロパティを使うことで、スクロールアンカーを無効化できます。

overflow-anchorプロパティとは

overflow-anchorプロパティは、ブラウザが自動的に選択する「アンカーノード（基準となる要素）」の調整動作を制御します。指定できる値は以下の2つです。

  • auto：デフォルト値。ブラウザによるスクロールアンカー調整が有効になります。
  • none：スクロールアンカーの調整を無効にします。

body要素や特定のコンテナ要素に対してoverflow-anchor: none;を指定すれば、その範囲内ではブラウザによる自動的なスクロール位置の補正が行われなくなります。

コード例

次の例では、body要素にoverflow-anchorプロパティを設定して、スクロールアンカーを無効化しています。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    overflow-anchor: none;
}
div {
    display: flex;
    flex-direction: row;
}
</style>
</head>
<body>
<div>
<img src="https://images.unsplash.com/photo-1613061588991-6dd130548bc7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1612129717112-9d1274034547?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1613079936591-8ce270890241?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1612454902143-328050834c9e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
</div>
<h2>Test overflow</h2>
</body>
</html>

実行結果

このコードを実行すると、画像が横一列に並べて表示され、スクロール中にコンテンツが読み込まれてもブラウザによるスクロール位置の自動補正は行われません。つまり、overflow-anchor: none を指定したことで、スクロールアンカー機能が無効化された状態になります。

CSSのoverflow-anchorプロパティでスクロールアンカーを無効化する方法

対応ブラウザと注意点

overflow-anchorプロパティは、Chrome・Edge・Firefoxなどの主要ブラウザでサポートされています。ただし、Safariでは長らくサポートされていなかったため、利用する際は対象ブラウザでの動作確認をおすすめします。また、無効化しすぎると逆にコンテンツ追加時のスクロールジャンプが発生する可能性があるため、適用範囲は必要な要素に限定するのがポイントです。

  1. CSSのobject-fitとobject-positionを使って画像を切り抜く方法

    CSSのobject-fitプロパティとobject-positionプロパティを組み合わせることで、要素内に表示する画像を切り抜いたり、表示位置を細かく調整したりできます。レスポンシブデザインにおいて、画像のアスペクト比を保ちながらレイアウトに収めたい場合に非常に便利な機能です。 基本構文 CSSのobject-fitプロパティおよびobject-positionプロパティの構文は以下の通りです。 Selector { object-fit: /*値*/; object-position: /*値*/; } object-fitの主な値 cover: アスペクト比を維持した

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {