引导表的自定义滚动条答案

【问题标题】：Custom scrollbar for Bootstrap Table引导表的自定义滚动条
【发布时间】：2014-12-13 05:04:51
【问题描述】：

我使用带有以下代码的 Bootstrap Table 完成了一个条带表（来自http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html 的第一个示例）。我需要找到一种方法让滚动条看起来像 slimScroll (http://rocha.la/jQuery-slimScroll) 生成的滚动条。这是不可协商的客户要求。

<table data-toggle="table" data-url="data1.json" data-cache="false" data-height="299">
<thead>
    <tr>
        <th data-field="id">Item ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
    </tr>
</thead>
</table>

问题：

1) 这是否可行，如果可行 - 如何？

2) 如果这不适用于引导表，是否有一个库可以为 tbody 创建这种类型的滚动条？（slimScroll 仅适用于 div，不适用于 tbody）

3) 如果 (1) 和 (2) 都不可能，对于带有这种类型的滚动条的固定标题可滚动正文表实现，我有哪些选择？

编辑：

我无法创建功能齐全的 jsfiddle，因为 bootstrap-table 似乎没有通过外部资源加载。但是，我能够创建一个 jsfiddle 来显示应用了 slimScroll 的 tbody 的作用。一个独立的 div 滚动很好。它后面的表格的 tbody 没有。

【问题讨论】：

我不知道为什么它不可行。你试过用你的表实现 jQuery slimScroll 吗？创建一个 jsfiddle？
我无法创建功能齐全的 jsfiddle，因为 bootstrap-table 似乎没有通过外部资源加载。但是，我能够创建一个 jsfiddle 来显示应用了 slimScroll 的 tbody 的作用。一个独立的 div 滚动很好。它后面的表的 tbody 没有。 jsfiddle.net/veddma/5KJka/774
@Jenya - 它可能不起作用，因为您必须操纵 dom 来覆盖滚动条。要获得粘性，您还必须克隆并编写一些脚本。这可能是该插件仅适用于 div 的原因。另外，我在移动设备上发现的所有滚动条插件都在某种程度上搞砸了，slimScroll 有 IE Mobile 错误。你只有一张桌子吗？它有多广泛？当那张桌子在触摸设备上时呢？如果这张桌子是一次性的，我会考虑使用 div 来伪造它。检测触摸并仅在非触摸设备上使用滚动操作。
如果无法在 jsFiddle 中进行测试，很难提供帮助，但如果您尝试 Bootstrap Table，请尝试设置 .fixed-table-body { overflow: hidden; }，然后将 slimScroll 应用到 .fixed-table-body table tbody。
我真的很讨厌你的客户；这是一个愚蠢的要求。

标签： jquery css twitter-bootstrap slimscroll scrollable-table

【解决方案1】：

这是开箱即用的。

检查生成的引导表元素，它不是滚动<tbody>，而是滚动'.fixed-table-body' 的包装div。

只需使用：

$(document).ready(function () {
  $('.fixed-table-body').slimScroll({});
});

这是一个有效的example。

【讨论】：

什么是固定表体，分配在哪里？
@MuneemHabib，这是bootstrap-table插件分配给容器div的类。