業務でスクロールバーを上下に挿入したので、記録に残していきたいと思います。

イメージとしてはこんな感じです。

スクロールバー上下が連動して移動できるようになってます。

#実装

index2.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>上下スクロールバー</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="containar">
    <div class="scrollbar" id="scrollbar">
      <div class="inner"></div>
    </div>
    <div class="scrollbox" id="scrollbox">
      <div class="inner">
        <table id="data-table">
          
            <th>項目1</th>
            <th>項目2</th>
            <th>項目3</th>
            <th>項目4</th>
            <th>項目5</th>
            <th>項目6</th>
            <th>項目7</th>
            <th>項目8</th>
            <th>項目9</th>
            <th>項目10</th>
            <th>項目11</th>
            <th>項目12</th>
            <th>項目13</th>
            <th>項目14</th>
            <th>項目15</th>
            <th>項目16</th>
            <th>項目17</th>
            <th>項目18</th>
          
        </table>
      </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>

tableタグにthをセットします。
※thは「Table Header（見出し）」のことです。

style.css

#containar {
    width: 500px;
    padding: 100px;
  }
  .scrollbar {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .scrollbar .inner {
    width: 2500px;
    height: 1px;
  }
  .scrollbox {
    width: 100%;
    margin-top: 5px;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .scrollbox .inner {
    width: 2500px;
    margin-bottom: 5px;
    background-color: #F9F8F6;
  }
  .scrollbox .txt {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
  }

レイアウト変更とスクロールバーをセットします。
この時点では行にデータが入っていなく、上下のスクロールバーが連動していないことがわかります。
では次

main.js

//上下のスクロールバー連動
$(function () {
    //「対象要素.on( イベント名, 関数 )」
    //イベント名がscrollなので、画面がスクロールした時に発動
  $("#scrollbar, #scrollbox").on("scroll", function () {
    if ($(this).attr("id") === "scrollbar") {
        //scrollLeftでスクロール量を取得
      $("#scrollbox").scrollLeft($(this).scrollLeft());
    } else {
      $("#scrollbar").scrollLeft($(this).scrollLeft());
    }
  });
});

//行にデータを挿入
var tableEle = document.getElementById("data-table");

for (var i = 0; i < 5; i++) {
  // テーブルの行を 5行追加する
  var tr = document.createElement("tr");

  for (var j = 0; j < 18; j++) {
    // テーブルの列を 18行追加する
    var td = document.createElement("td");
    td.innerHTML = "データ" + (i + 1) + "-" + (j + 1);
    tr.appendChild(td);
  }
  tableEle.appendChild(tr);
}

このようにすることによって行にデータが入り、上下のスクロールバーが連動していることがわかります

##参考
https://qiita.com/kuro-wassan/items/86b6a24787116797a5d0