【CSS】100vwを指定すると横スクロールバーが出てくるとき
状況
画面いっぱいに要素を広げたい！
→要素に100vwを指定して左右のマージンにcalc(50% – 50vw)を指定する
→windowsのときちょっとだけ水平スクロールが起こるの何？
ってなった時の解決方法です。
原因
水平スクロールが起こる原因は以下です。
- vwは（表示されている場合）スクロールバーの幅も含めている
- windows、またはmacの場合も設定によっては常にスクロールバーが表示される
解決方法
cssに１行追加すると解決します。
html, body {
overflow-x: hidden;
}overflowを指定すると都合が悪い場合はjsでごにょごにょしてスクロールバーの幅を求めて100vwからマイナスするようにします。詳しくはこちらのページがわかりやすかったです。
参考
- コンテナからの解放。
https://lopan.jp/breaking-out/