Chromeの更新と 「overflow: overlay」
今日、このブログのスクロールバーのデザインが失調しているのに気付きました。
下がこれまでのスクロールバーのデザインで、スクロールバーのトラックが透明な点が、デザインで工夫をした所です。
スクロールバーが表示全体を左へ押しつけるのを嫌い、このデザインにしたのですが、要になっていたのは 「overflow: overlay」のプロパティでした。
このプロパティが無効になり、今朝は下の表示に変わっていました。
トラックの「白」は素のHtml要素が露出したからで、本来はトラックの下に潜り込むBodyの右端は、トラックの左へ追いだされています。 これは普通のスクロールバーと変わらない配置で、トラックを透明にアレンジした状態です。
何故「overflow: overlay」が効かないのか調べると、以下の記事がありました。
今年 5月30日の記事ですが、「Chrome 114」で適用された機能の中に、関連する内容として「overflow:overlay aliases overflow:auto」というのがありました。 この意味は「overflow: overlay」を「overflow: auto」として扱うと言う事でしょう。 早い話が「overlay」の特別な機能は無効ですという事です。
実らなかった「overflow: overlay」
これまで、Chrome上では非推奨ながら有効でしたが、このプロパティの背景には、スマートフォン等の狭幅ディスプレイにブラウザが対応した経緯がありそうです。 現代のウェブデザインにスクロール機能は必須ですが、狭いディスプレイをより狭くするバーのデザインをなんとかできないかと言う事が、問われたはずです。
その現在の答えはスマホのスクロールデザインで、操作時のみ狭いスクロールバーが出たりします。 全環境に対しての答えは、タブレットやPCの場合も含めて、ブラウザ単位でデザインが変遷し、現在も不統一に煮詰めが進んでいる様に見えます。
この仇花のプロパティ「overflow: overlay」に対して、別仕様のデザインが、現在は使われ出している様です。 WindowsのOSのメニューには、トラックの幅がマウスでポイントした時に拡がるデザインが採り入れられていますね。
今回調べると、Chromeに「スクロールバー自動非表示機能」が実装されている事を知りました。 ただし、Windows環境ではデフォルトで OFFですが。
上のぺージに説明がありますが、Chromeのアドレスバーに以下のアドレスを入力して、「Overlay Scrollbars」を有効にすると、そのデザインを見る事が出来ます。
マウスでポイントした時のみスクロールノブが表示され、ホイール操作時は細いノブが表示されるデザインです。 スクロールバーの表示時に全体表示が左へ押されない点は「overflow: overlay」と同じです。
ブログ閲覧者にこのデザインを提供出来たらと思いますが、それは出来ません。 もし自分の Chrome表示だけこのスクロールバーで満足なら、「Overlay Scrollbars」を有効にしてください。
残念ながら、私は JavaScriptツールや CSSスタイルの発信者として、一般的ではない環境には出来ないので、元に戻しました。
上記の例の様に、ブラウザのスクロールバーデザインは、次第にデフォルトで非表示に近付いているという事を感じます。「overflow: overlay」を廃止する前に、いっそのこと「Overlay Scrollbars」を標準にしてくれたら良かったのですが。
どうしたかと言うと
「overflow: overlay」が無効になったので、デザインを変えました。 細いスクロールバーは扱い難いので避け、トラックの背景色を背景に馴染む同系色にしました。
以下は当方のスキン設定で、参考にならないと思いますが、覚え書きです。