ページ下部にテーブルと連動する横スクロールバーをつくる。

◆目的

テーブルの中身が多くて、横スクロールバーが出たときに、画面下部にもそれと連動するスクロールバーを作成する。

◆実装

テーブルと連動するダミーを用意して、目的を達成する。

<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