おはようございます！マネジメントオフィスいまむらの今村敦剛です。
年末年始にElementorを使ってちまちまとWeb制作をしていますが、画像がモバイルブラウザの幅を超えてスクロールバーが表示されるケースがあったので、対処法を記録しておきます（ほぼ個人的備忘録）
スポンサーリンク
画像がモバイルブラウザの幅を超えてスクロールバーが表示される
具体的にいうと、以下のような事象です。
どうしてこうなったかと言うと、このページのhero画像(正確にいうと動画)を、scale関数を使って拡大したのです。（Elementorの操作としては、高度な設定→変換→縮尺変更）
具体的には、画像のサイズをx軸およびy軸方向に1.5倍に拡大したのですが、その画像が元のコンテナやビューポートの幅を超えたようで、これが原因で水平方向のスクロールバーが表示されるようになった可能性が高いです。
この問題の解決方法は３つ
この問題を根本から解決するには、拡大する前に画像の幅を小さくする、または拡大しないようにする方法があります（当たり前ですが）。
もしくは、ビューポートのサイズに応じて画像のサイズが調整されるように、画像の幅を width: 100%; と設定しておくのが一般的なんでしょうけど、今回はElementorを使っている上、しかもこの問題を起こしているのはhero画像ではなく動画なので、単純にwidth: 100%; と設定するカスタムCSSを書いてもうまくいきませんでした。（なにかやりようはあるのでしょうけど）
しかたなく今回とった方法は、overflow-x: hidden; を使用して水平方向のスクロールバーを強制的に非表示にする方法でした。根本解決ではなく、対処療法なんですけど、面倒くさいのでこの方法でやりました。
画像がモバイルブラウザの幅を超えてスクロールバーが表示されるのを強制的に非表示にする
以下のCSSをカスタムCSSにコピペすればOKです。
css
html,body{
width:100%; overflow-x:hidden;
}
ElementorでこのCSSを適用するには、以下のステップに従ってください。
- Elementorエディタで該当するセクションを選択します。
- 選択したセクションに対して「高度な設定」タブを開きます。
- 「カスタムCSS」のフィールドに上記のCSSをペーストします。（この時点でプレビュー画面ではCSSが反映される）
- ページを「更新」して効果を確認します。（「更新」を押さないと、最終的に変更が反映されない）
ちなみにこのCSSを解説しておくと、html, body {：というセレクターは、html要素とbody要素の両方を対象とするという意味です。
そしてwidth: 100%;は、html要素とbody要素の幅をビューポート幅の100％に設定するという意味です。これは、画面またはブラウザウィンドウの全幅を占めることを意味します。
overflow-x: hidden;というプロパティは、水平方向のスクロールバーを隠し、水平方向のスクロールを防ぎます。これでスクロールバーを強制非表示にしたというわけですね。
