【CSS】overflow-x: scroll はみ出した要素を右を基点としてスクロールする方法

CSSプロパティの「overflow-x: scroll」を使えば、はみ出した要素をスクロールして確認することができます。
デフォルトでは左が基点となり右へスクロールすることができますが、これを右を基点として左へスクロールする方法をご紹介します。

右からスクロールをしたい条件といえば、テキストを縦書きにしているときではないでしょうか？
もしくは画像のときもありますよね。
今回は縦書きのテキストの場合と、画像の場合で、はみ出した要素をスクロールさせたいと思います。

縦書きのテキストの場合

See the Pen overflow-x_right_scroll by RECOOORD (@recooord) on CodePen.

上記サンプルのテキストを左右にスクロールして確認してみてください。
右が基点となり、左へスクロールできると思います。

それではCSSの重要なポイントだけ解説します。

CSS

section{
  max-width: 600px;
  height: 200px;
  padding: 20px;
  margin: auto;
  border: 2px solid #000;
  
  /* 横にはみ出した要素をスクロールするプロパティ */
  overflow-x: scroll;
  
  /* 縦書きにするプロパティ */
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

はみ出す要素の親要素のタグに「overflow-x: scroll」を設定するのは当然ですが、この親要素に縦書きにするプロパティを指定します。
これだけで、右が起点となり左へスクロールすることができます。

画像の場合

See the Pen overflow-x_right_scroll_img by RECOOORD (@recooord) on CodePen.

テキストと同様に右が基点となり左へスクロールすることができます。

CSS

section{
  max-width: 600px;
  padding: 20px;
  margin: auto;
  border: 2px solid #000;
  
  /* 横にはみ出した要素をスクロールするプロパティ */
  overflow-x: scroll;
  
  /* 文字表記の方向（左右）を指定する */
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
p{
  /* 画像のサイズ指定 */
  width: 1200px;
}
img{
  /* 画像のサイズ指定 */
  width: 100%;
  hight: auto;
}

画像はRetinaディスプレイで表示されることを想定して2倍のサイズで書き出しており、CSSで通常のサイズ（1200px）になるように記述しております。
こちらも縦書きにするCSSプロパティの「-ms-writing-mode: tb-rl」と「writing-mode: vertical-rl」を入れることで実装することができます。

以上が「overflow-x: scroll」で右を基点としてスクロールする方法でした。
よかったら参考にしてみてください。