Floating horizontal scrollbar

Sep 27, 2017

How to use a jquery plugin to implement floating horizontal scrollbar, which is especially useful for single page application where partial content of the page (i.g. table of data) are large and dynamically updated and you don’t want to make use of the browser scrollbar for scrolling the partial content.

Installation

Download both css/js files
- jquery.floatingscroll.css
- jquery.floatingscroll.js
Add both resource files to html document

<link href="/path/to/jquery.floatingscroll.css" rel="stylesheet" type="text/css" />
<script src="/path/to/jquery.floatingscroll.js" type="text/javascript"></script>

Create css style for container to have scrollbar

.spacious-container {
    overflow: auto;
    width: 100%;
}

Floating scrollbar application - static container

Apply style to container (e.g. div) for which floating scrollbar will be needed

<div class="spacious-container">
    <table>
        <!-- static table whose data/row/column will not change once loaded -->
    </table>
</div>

Apply javascript to initialize floating scrollbar

$(document).ready(function () {
    $(".spacious-container").floatingScroll();
});

Floating scrollbar application - dynamic container

Apply style to container (e.g. div) for which floating scrollbar will be needed

<div class="table-controls">
    <button id="refresh-button">Refresh</button>
    <input id="tableColumnToggle" type="checkbox"/><label>Show all columns</label>
</div>
<div class="spacious-container">
    <table>
        <!-- dynamic table whose data/row/column will be changed -->
        <!-- (e.g. ajax) based on some events -->
    </table>
</div>

Apply javascript to initialize & update floating scrollbar

// init floating scrollbar
$(".spacious-container").floatingScroll("init");

// update scrollbar if user clicks on the refresh button to update table data
$("#refresh-button").click(function () {
    $(".spacious-container").floatingScroll("update");
});

// update scrollbar if table columns change (e.g. toggle show/hide)
$("#tableColumnToggle").bind("change", function() {
    $(".spacious-container").floatingScroll("update");
})