浮动水平滚动条
如何使用 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");
})参考资料