CSSで横スクロールバーを上に持っていくためにしたハック

HTMLで指定したwidthを超えたときに出てくるスクロールバーってありますよね。

こんなやつです。

これを上に持っていきたいと思ったときに色々苦労したのでまとめておきます。

そもそもなんでそんなことがしたかったのか

ユーザービリティの向上です。

私が担当しているシステムで、とある一覧画面があるのですが、（上スクショは全く関係ありません）

それを利用頂いてるユーザーの方から横スクロールがわかりにくいというフィードバックをいただきました。

フィードバックをいただいた当初は「そんなにわかりにくいか・・・？」とも思ったのですが、

よくよく考えてみると私は普段開発でMacのトラックパッドを使用していることもありストレスなくスクロールできるのですが、

普段マウスを使っている方にとっては（100件以上一覧データがある）画面の一番下までスクロールし、スクロールバーをドラッグするというのはなかなかストレスになりそうだという考えに至り、対応できないかなーと思うようになりました。

調べてみる

まずは調べてみました。

担当しているシステムではVuetifyを使用しており、一覧データの表示には DataTable を使っていました。

なのでまずは公式ドキュメントをみてみましたが、スクロールバーを動かすプロパティは存在せず・・・。

次にCSSのプロパティを調べてみましたが、現時点（2021/7/13）でCSSでスクロールバーにスタイルを当てようと思うと、実験的な機能として提供されようとしてはいるものの、

その中を見ても横スクロールバーを上に持っていけるようなものは提供されていなさそうでした。

ハック的に解決するような記事がいくつかでてきたような結果となりました。

仕方がないのでハック的に解決する

アプローチとしては大きく2パターンありそうでした。両方紹介します。

なお、以下のサンプルを使用します。ソースはタブを切り替えると確認できます。

1. 要素を回転させる方法

少し検索するとこちらのパターンがよく引っかかった印象です。

親要素（スクロールバーが付いてる要素）を半回転させ、中身の要素をさらに半回転させることによりスクロールバーを上に持ってくるというパターンです。

これで上手く行きました。

ただ、これで上手くいかないパターンもあります。

以下のように子要素の中でposition: absoluteを使うなどしてスクロールするコンテンツの内部で要素を固定している場合です。

そのまま回転させると以下のように固定している要素も一緒にスクロールされてしまいます。

こういった場合は固定させる要素を外に切り出したりして調整する必要があります。

2. スクロールバーを別途用意する方法

あまりスマートな方法ではないですが追加で対応可能なので、現状のDOMの構成をなるべく崩さずに調整したい場合はこちらの方が良いかもしれません。

ちなみに下にあるバーを見えなくするにはCSSに ::-webkit-scrollbar 等を追加すれば可能ですが、こちらもまだ実験的な機能になりますので対応ブラウザをチェックは必須になりそうです。

最後に

かなりハック的な内容になり、ここまでやるべきなのかと言われるとケースバイケースな気もしなくはないのですが

一つの方法として頭の中に入れておき、スクロールバーの調整は一筋縄ではいかないんだな・・・と知っておくと良いのではないかと思います。