やりたいこと

vue-cli＋Vuetify環境下にて、
HTML要素の横スクロールバーを下部だけでなく上部にも表示したい。

完成品

ここでのスタイルはなるべく最低限にしています。

実現方法

以下の通りに実装しました。※下述の参考記事から発想を得ました。

横スクロールバーをつけたいHTML要素（以下、「コンテンツ」）に
CSSで下部の横スクロールバーを表示させる
コンテンツの上に新しいブロック要素を追加し、
[1]と同様にCSSで下部の横スクロールバーを表示させる
コンテンツと[2]で追加した要素のスクロールイベントを
Vuetifyの v-scroll.self で拾う
コンテンツと[2]で追加した要素の element.scrollLeft を
[3]のイベント内で同期させる

template

<template>
  <div>
    <!-- 横スクロールバー上 -->
    <div id="topbar" class="scroll-x-topbar" v-scroll.self="onScrollXTopBar">
      <div class="inner-topbar"></div>
    </div>

    <!-- コンテンツ ＋ 横スクロールバー下 -->
    <div id="content" class="scroll-x-content" v-scroll.self="onScrollXContent">
      <div class="inner-content">
        これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。
      </div>
    </div>
  </div>
</template>

script

export default {
  methods: {
    onScrollXTopBar(e) {
      document.getElementById("content").scrollTo(e.target.scrollLeft, 0);
    },
    onScrollXContent(e) {
      document.getElementById("topbar").scrollTo(e.target.scrollLeft, 0);
    },
  },
};

style

.scroll-x-topbar {
  overflow-y: hidden;
  overflow-x: scroll;
  width: 500px;
  height: 10px;
}
.scroll-x-content {
  overflow-y: hidden;
  overflow-x: scroll;
  width: 500px;
}
.inner-topbar {
  width: 1000px;
  height: 1px;
}
.inner-content {
  width: 1000px;
  background-color: lightskyblue;
}

参考記事

以下の記事を類似の一例として参考にさせていただきました。ありがとうございました。