スマホでテーブルを横スクロールで表示させる場合に、テーブルの高さが高すぎて、ウィンドウに表示されないほど下にある場合、テーブル下のスクロールバーが上にもあったら便利ですよね。

それをかなえるハックがいくつかあります。

１. transformで上に移動させる

親要素（スクロールバーが付いてる要素）を半回転させ、中身の要素をさらに半回転させることによりスクロールバーを上に持ってきます。
ただし、子要素でposision:absoluteで要素を固定していると、上手くいきません。

.
.wrapper {
  width: 300px;
  overflow-x: scroll;
  transform: rotateX(180deg);
}
.content {
  background-color: aqua;
  width: 600px;
  transform: rotateX(180deg);
}

2. スクロールバーを付け足す

現状のDOMの構成をなるべく崩さずに調整できます。

.
.wrapper {
   width: 300px;
   overflow-x: scroll;
}

.content {
  background-color: aqua;
  width: 600px;
}

.scrollbar {
  width: 300px;
  height: 10px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.inner {
  height: 1px;
  width: 600px;

const targetClasses = ['wrapper', 'scrollbar']

for(const targetClass of targetClasses) {
	document.querySelector(`.${targetClass}`).addEventListener('scroll', function () {
  	const otherClass = this.className.includes(targetClasses[0]) ? targetClasses[1] : targetClasses[0];
    console.log(otherClass)
    const left = document.querySelector(`.${targetClass}`).scrollLeft;
    document.querySelector(`.${otherClass}`).scrollTo(left, 0);
  })
}

テーブルの上部に仮のdivタグを設置して、テーブルと同じ固定幅をcssで設定することで、いかにも下のテーブルのために動いているようにみせることもできるのですが、テーブルが固定幅の場合に限られますし、いずれも一長一短です。HTMで実装をお願いしたいところです。