tableなど、画面幅からはみ出す要素を画面幅以内のdivなどで囲い、overflow-x:auto/scroll、（縦はtableの高さそのまま）とした場合、水平のスクロールバーは下端にしか出ません。
tableの行が多い場合、画面を下までスクロールしないと水平スクロールバーが現れず、横にスクロールできるかどうかがわかりにくいです。
方法として2つ見つけました。
ひとつは囲ったdivをtransformで上下反転し、その中身をさらに上下反転してスクロールバーを上に持ってくる方法。
これが一番楽なやり方かと思います。
（参考：https://dev.classmethod.jp/articles/css_scrollbar_adjustment/）
しかし、下までスクロールすると今度は下にスクロールバーが無いのが不便になります。
そこでjavascriptを使って上下にスクロールバーを表示させます。
.scrollbarという上部スクロールバーを表示させるためだけのdivと、.scrollboxという実際にoverflowさせるdivの二つを用意するのがポイントです。
（参考：https://qiita.com/kuro-wassan/items/86b6a24787116797a5d0）
しかし、参考サイトのままだとちょっと使えないところがあるので修正します。
まずはjqueryを使わないようにします。
そしてscrollbox、scrollbarを使う要素が複数あってもちゃんと動くようにします。
完成形が以下です。
Write comment