フローティング水平スクロールバー
jQuery プラグインを使用してフローティング水平スクロールバーを実装する方法。これは、ページの部分的なコンテンツ (データ テーブルなど) が大きく、動的に更新され、部分的なコンテンツをスクロールするためにブラウザーのスクロール バーを使用したくない単一ページ アプリケーションに特に役立ちます。
Installation
-
Download both css/js files
-
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");
})参考文献