🍎

設定でスクロールバーの表示を常に表示にした方が良い話 [mac]

2021/11/19に公開

はじめに

macの設定＞一般＞スクロールバーの表示を常に表示させていなくて痛い目に遭ったので記事にまとめました。

スクロールバーの表示を常に表示にするとブラウザを開いた際に、常に表示するスクロールバー分の幅が必要になり、widthの設定をミスると画面が横スクロール可能になってしまう話です。

画面幅いっぱいにコンテンツを表示させる場合100vwや100%を使うと思います。
vwと%の違いですぐ思い浮かぶのがvwは親要素の横幅に依存せずに画面幅を設定でき、%は親要素に依存した画面幅を設定できる点です。

また、

vh -> スクロールバーの幅も含む
% -> スクロールバーの幅も含まない

このような違いもあります。

今回の問題はこのスクロールバーの幅の差分によって発生します。

簡単に再現してみました。

ブラウザ下に横のスクロールバーが表示されているのがわかります。

この問題の厄介なところはmacの設定を変更しないと、横スクロールされる現象が発生しない点です。

設定＞一般＞スクロールバーの表示
を常に表示にしてください。

この設定をしていないと実装中に気づけないです。

calc(100vw - 100%)でスクロールバーの幅を取得する方法もありますが、こちらの方法だと100%が親要素に依存しているので安全ではないです。
この問題を解決するためには正しくマークアップするしかないです。

今回はwidthのvwと%の違いからmacの設定について記事を書きました。
画面が横スクロールできてしまうとUX的にもよくないので気をつけていきましょう。