overflow: overlay

概要

overflow: overlayは歴史的にスクロールバーをレイアウトスペースを消費せずにコンテンツ上に重ねて表示する非標準の値でした。現在ではoverflow: autoの標準的なエイリアスとして扱われます。レガシーコードとの互換性のために存在しますが、新規開発ではoverflow: autoの使用が推奨されます。

対応ブラウザ

基本構文

.container {
  overflow: overlay;
  /* overflow: auto と同等 */
}

実務での使いどころ

• レガシーコードの互換性維持

  過去にoverlay値を使用していたコードベースが、モダンブラウザでも正常に動作することを保証します。

注意点

アクセシビリティ

• スクロール可能なコンテナにはtabindex属性を付与し、キーボードユーザーがスクロール操作できるようにしてください。

参考リンク

• MDN Web Docs — overflow: overlay
• Can I use — overflow: overlay