ページ下部にテーブルと連動する横スクロールバーをつくる。
◆目的
テーブルの中身が多くて、横スクロールバーが出たときに、画面下部にもそれと連動するスクロールバーを作成する。
◆実装
テーブルと連動するダミーを用意して、目的を達成する。
<div class="dummy-table-frame" style="height:30px; bottom: 0; position: fixed; overflow-x: auto">
<div class="dummy-table" style="height: 1px"></div>
</div>
<script>
$(function() {
//ダミーテーブル
const dummyTableFrame = $('.dummy-table-frame');
const dummyTable = $('.dummy-table');
//実際のテーブル
const tableFrame = $('.table-frame');
const table = tableFrame.get(0);
//dummyのサイズも実際のテーブルサイズに合わせる
dummyTableFrame.width(tableFrame.width());
dummyTable.width(table.scrollWidth);
//ページのサイズが変わったらdummyのサイズも実際のテーブルサイズに合わせる
$(window).resize(function(){
const tableFrameSize = tableFrame.width();
const tableSize = table.scrollWidth;
dummyTableFrame.width(tableFrameSize);
dummyTable.width(tableSize);
});
//スクロールバーを連動させる
dummyTableFrame.get(0).onscroll = () => {
table.scrollLeft = dummyTableFrame.get(0).scrollLeft;
};
table.onscroll = () => {
dummyTableFrame.get(0).scrollLeft = table.scrollLeft;
};
});
</script>
テーブルの下に、中身が何もないダミーのフレームと入れ物を作成。styleで画面下部に固定する。あとは連動させるjsかいてOK
Author And Source
この問題について(ページ下部にテーブルと連動する横スクロールバーをつくる。), 我々は、より多くの情報をここで見つけました https://qiita.com/shibaHaya/items/513734cae27ae90c1e22著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .