業務でスクロールバーを上下に挿入したので、記録に残していきたいと思います。
イメージとしてはこんな感じです。
スクロールバー上下が連動して移動できるようになってます。
#実装
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