サイトの領域からはみ出した要素を横スクロール可能にするCSS

・はみ出した要素を横スクロール可能にする
・親要素の余白は無視して、スクロール感を強調する
・サイト自体に横揺れは起こさない

ちょっとわかりにくいけど、上記の画像の波形のように、右側はbodyの余白を無視して画面一杯に表示させる。

<div class="parent">
    <span class="child">
         ここにはみ出しがあり得る要素
    </span>
</div>

.parent {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-right: calc(((100vw - 100%) / 2) * -1);
}

.child {
    overflow-x: auto;
}

はみ出しがあり得る要素は、折り返しを禁止にするなどして横に伸びるようにするなどしたらいいかも。

親要素に対して、

margin-right: calc(((100vw - 100%) / 2) * -1);

を指定することにより、bodyとかの余白もフル無視で右側に要素がはみ出るようにする。

これ結構重要。

可視範囲外に続きがあることを演出しないと、横スクロール可能だと気付いてもらいにくい。

このままではページ全体が横揺れを起こしてしまうので、overflow: hidden;ではみ出た部分を隠す。

子要素に対して

overflow-x: auto;

を指定することにより、横スクロールを可能にしている。

子要素に対してoverflow-x: auto;で横スクロールを許可する。

参考にしたサイト

親要素のpaddingを無視して、画面の横いっぱいに表示するCSS - Qiita