通常、横スクロールなHTML要素であれば、要素の下にスクロールバーが出ますが、以前案件で、HTML要素の上にもスクロールバーを設置するというものありました。
その際に使用した、プラグインは使わずにjQueryを使って設置する、ちょっとだけトリッキーな方法をご紹介します。
JS使ってまで上に設置する必要あるんかい！というツッコミが沸くかと思いますが、ちょっとした小技としてご参考になれば嬉しいです。

完成イメージ

サンプルコード

jQueryを使用します。ここでは3.3.1を使用しました。

ディレクトリ構造

root/
├ index.html
├ style.css
├ main.js

HTML

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>横スクロールなHTML要素の上下にスクロールバーを設置する</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="wrapper">
    <div class="scrollbar" id="scrollbar"><div class="inner"></div></div>
    <div class="scrollbox" id="scrollbox">
      <div class="inner">
        <p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia est similique velit provident illo pariatur quia dolores, molestias deleniti aperiam rerum ducimus, odio, dolorem eos. Quo quos id dolores aperiam!</p>
      </div>
    </div>
  </div>
<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>

コンテンツが入るボックスの上に<div class="scrollbar" id="scrollbar"><div class="inner"></div></div>を設置しています。
このdiv要素で擬似スクロールバーを設置します。

CSS

次にスタイルを指定していきます。

style.css

#wrapper {
  width: 200px;
  margin: auto;
  padding: 100px 0;
}
.scrollbar {
  width: 100%;
  height: 10px;
  overflow-x: scroll;
  overflow-y: hidden;
}
.scrollbar .inner {
  width: 500px;
  height: 1px;
}
.scrollbox {
  width: 100%;
  margin-top: 5px;
  overflow-x: scroll;
  overflow-y: hidden;
}
.scrollbox .inner {
  width: 500px;
  height: 200px;
  margin-bottom: 5px;
  background-color: #F9F8F6;
}
.scrollbox .txt {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
/* スクロールバーのスタイル */
.scrollbar::-webkit-scrollbar,
.scrollbox::-webkit-scrollbar {
  height: 10px;
}
.scrollbar::-webkit-scrollbar-track,
.scrollbox::-webkit-scrollbar-track {
  border-radius: 5px;
}
.scrollbar::-webkit-scrollbar-thumb,
.scrollbox::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #e7e7e7;
}

スタイル指定のポイントをまとめます。

.scrollbarに.scrollbox（スクロールをする外側のボックス）と同じwidthを指定する。
.scrollbar > .innerに.scrollbar > .inner（コンテンツが入る内側のボックス）と同じwidthを指定する。
.scrollbarのheightを1pxとする。

現地点での見た目はこんな感じです。
まるで.scrollboxに2つのスクロールバーが付いているかのように見えます。

JavaScript

最後にJSで.scrollbarと.scrollboxのそれぞれスクロールが連動するように設定します。

main.js

$(function() {
  'use strict';
  $("#scrollbar, #scrollbox").on('scroll', function() {
    if ( $(this).attr('id') === 'scrollbar' ) {
      $('#scrollbox').scrollLeft($(this).scrollLeft());
    } else {
      $("#scrollbar").scrollLeft($(this).scrollLeft());
    }
  });
});

表示を確認してみましょう。.scrollbarと.scrollboxのそれぞれスクロールが連動してれば、完成です。

【プラグインなし】横スクロールなHTML要素の上下にスクロールバーを設置する

完成イメージ

サンプルコード

ディレクトリ構造

HTML

CSS

JavaScript