スクロールバーの表示有無でコンテンツがちょっとずれる問題
問題
このサイトの左上にはサイトタイトルが表示されています。
ヘッダーデザインは全ページ共通なのでページ遷移しても変化がないはずですが、時々ちょっとだけ左にずれたりすることに気づきました。
原因は明らかで、スクロールバーの表示有無でした。
つまり、スクロールバーを表示していないページから表示しているページに移動した場合、右側にスクロールバーが表示される分、コンテンツの表示領域が左側に追いやられてしまうわけです。
対策
CSSのscrollbar-gutterプロパティで対策できることがわかりました。
html { scrollbar-gutter: stable; }
こうするとスクロールバーが表示されない場合でもその分の領域を常に確保してくれます。
ただし、常にページ全体が左にちょっと寄ってる状態になるので気になります。
そんな時は、both-edgesを追加することで左側にも同じ幅を確保してくれるので、これで中央に固定できるようになります。
html { scrollbar-gutter: stable both-edges; }
副作用
スクロールバーの表示領域が常に確保されてしまうため、ページ端に常に余白ができます。
このサイトのヘッダーの下には区切り線が引いてありますが、よく見ると両端が少し切れています。
個人的には、このデザインもありかなと思ったのでそのままにしています。
両端まで表示したい場合はどうするのがいいのかざっと調べてみましたが、意外と厄介そうでした。
ヘッダーの表示幅を100vwにすればいいのかなと思いましたが期待通りに効かなかったので、構造から変えたり別の対策が必要なのかもしれません。
macOS のオーバーレイスクロールバー
macOS ではスクロールをしているときだけスクロールバーが表示されたりします。これはオーバーレイスクロールバーというらしいです。
名前からして、コンテンツの上にスクロールバーが表示されているのでしょう。
ということで、そもそも今回のようなスクロールバーの有無でコンテンツ表示がずれる問題が起こらないようです。
ただし、OSの設定でスクロールバーを「常に表示」にしてある場合は、この問題が起きます。
また、オーバーレイスクロールバーになっている場合はscrollbar-gutter: stableを設定しても画面端の領域確保はされないようです。