はじめに
この記事は、ユアマイスターAdventCalendar2021の19日目の記事です。
Macの設定＞一般＞スクロールバーの表示を常に表示させていなくて痛い目に遭ったので記事にまとめました。
概要
スクロールバーの表示を常に表示にするとブラウザを開いた際に、常に表示するスクロールバー分の幅が必要になり、widthの設定をミスると画面が横スクロール可能になってしまう話です。
vw と % の違いについて
画面幅いっぱいにコンテンツを表示させる場合100vwや100%を使うと思います。
vwと%の違いですぐ思い浮かぶのがvwは親要素の横幅に依存せずに画面幅を設定でき、%は親要素に依存した画面幅を設定できる点です。
また、
vh -> スクロールバーの幅も含む
% -> スクロールバーの幅も含まない
このような違いもあります。
今回の問題はこのスクロールバーの幅の差分によって発生します。
サンプル画像
簡単に再現してみました。
ブラウザ下に横のスクロールバーが表示されているのがわかります。
Macの設定について
この問題の厄介なところはMacの設定を変更しないと、横スクロールされる現象が発生しない点です。
設定＞一般＞スクロールバーの表示
を常に表示にしてください。
この設定をしていないと実装中に気づけないです。
この問題を防ぐには
calc(100vw - 100%)でスクロールバーの幅を取得する方法もありますが、こちらの方法だと100%が親要素に依存しているので安全ではないです。
この問題を解決するためには正しくマークアップするしかないです。
（他にも解決方法があれば教えていただきたいです）
最後に
今回はwidthのvwと%の違いからMacの設定について記事を書きました。
画面が横スクロールできてしまうとUX的にもよくないので気をつけていきましょう。
参考文献
https://developer.mozilla.org/ja/docs/Web/CSS/length
https://shimotsuki.wwwxyz.jp/20191230-471
↧