「overflow: overlay」は現代的なスクロールバーデザイン

2023年6月 Chrome 114 で、このページで扱う「overflow: overlay」のプロパティは実質的に無効化されました。

このページのテスト用の要素のスクロールバーで「overflow: overlay」を設定したものは、通常の「overflow: auto」として機能し、説明文と実際が異なります。 廃止の影響などに関しては、以下のページも参考にしてください。

 

 

 

 

 

非推奨？ 

「非推奨」扱いのためか、ネットで検索しても「overflow: overlay」のプロパティの説明が殆どありません。 しかし、このページの説明を読まれると、こういったプロパティが必要と思われる方も居られると思います。

 

（注）
このページのサンプルは Chrome, Edge 等の「overflow: overlay」のCSSプロパティに対応するブラウザでのみ、正常に評価できます。

 

 

 

スクロールバーの扱いは一貫性に欠ける 

ブラウザが表示するスクロールバーは、デザイン上で色々と扱い難いものです。 最近は、幅や配色の指定が可能になりつつありますが、ブラウザによって幅が異なったり、CSS指定によるスクロールバーの表現が、統一されていなかったりしました。

 

そうこうする間にスマートフォンが台頭し、狭いディスプレイをスクロールバーで削られない様に、狭幅で、ユーザーの操作に反応して表示/非表示となるスクロールバーデザインが普通になりました。 これはPCのOSにフィードバックされつつありますが、ブラウザでの採用は進んでいません。

 

しかし、これは「遅れている」だけでしょう。 私は、ウェブページのCSSアレンジに関わって来ましたが、従来のスクロールバーの仕様（CSS仕様）は扱い難く、その問題のひとつは、スクロールバーの表示/非表示で、ページ表示が影響される事です。

 

このページで「overflow: overlay」を取り上げるのは、これが改善の方向を指すプロパティと考えるからです。

 

 

 

「overflow」の指定とスクロールバーデザイン 

以下に、3つのサンプルを用意しました。 最初の2つは、最も一般的なCSS指定で、最後が「overflow: overlay」です。

 

▪各サンプルで、外側の「青枠」をブラウザのウインドウと考えてください。 違いを判り易くするために、この「青枠」を幅固定、高さのみ調節可能としています。 右下隅をマウスでドラッグすると、高さを調節できます。

 

▪内部のグレーのブロックは、ブラウザのウインドウ内に表示された、ページ全体の要素の代わりです。（ブロックと実際のページの表示要素は、同様に振舞います）

 

▪「overflow-x」で横スクロールバーの表現を指定できますが、ここでは判り易くするために「overflow-y」の縦スクロールバーについてのみの説明としています。

 

 

 

❶「overflow-y: auto」

 

 

 

 

❷「overflow-y: scroll」

 

 

 

 

❸「overflow-y: overlay」

 

 

 

 

 

プロパティによる表現の違い 

❶「auto」の指定は、スクロールせずにページ全体が見える場合は、スクロールバーが表示されません。「青枠/ウインドウ」が、マージンを含めたページの範囲が一部でも隠れる高さになると、縦スクロールバーが表示されます。

 

注意して欲しいのは、スクロールバーが表示されると同時に、ブロックの位置が左にズレる事です。 ブロックはウインドウの左右の中央に表示する指定なので、スクロールバー幅の1/2だけズレます。

 

 

❷「scroll」の指定は、常にスクロールバーが表示されるので、ブロックの位置は最初から左方向にバー幅の1/2だけズレています。

 

ウェブページは、ページ全体の縦長がウインドウより大きい事が多く、❶❷のどちらでも「縦スクロールバー」が表示される場合が多いので、この問題に気付く事は少ないでしょう。 しかし、ウェブアプリケーション（例えばブログ編集画面など）やページ上のダイアログでは、❶❷のどちらを選ぶかで、かなりデザインに影響する事があります。

 

 

❸「overlay」は、スクロールバーの表示/非表示によって、ページ全体の表示がズレる事がありません。 

 

このデザインで、操作が無い場合にスクロールバーを非表示にすれば、スマホのスクロールバーと同じになります。 非表示化は、JavaScriptなどで可能と思われますが、ブラウザのデフォルトデザインになることが期待されます。

 

 

 

「overflow: overlay」のスクロールバーの配置 

「overlay」は被せると言った意味で、画像アプリの「レイヤー機能」でご存知かも知れません。 スクロールバー（track）を画面の横に追加、あるいは割り込ませると「幅の変化と表示ズレ」を生じるので、上に被せたバー配置を指定するものです。

 

 

「body」の一部が「track」に隠れますが、「非推奨」に追いやられたのはその理由からかもしれません。 でも私は、各所でその必要を感じます。 いずれ、スクロールバーが居座ったままのブラウザデザインを「古臭いデザイン」と感じる日が来るのではと、思っています。

 

 

 

参考記事 

スクロールバーのCSSアレンジに関して以下で纏めています。

 

 Chrome / Edge のスクロールバーアレンジ

 

 

 

Firefox のスクロールバーアレンジ 

 

 

 

「overflow: overlay」の使いどころ