如何使用 Bootstrap 创建自定义滚动条？

Question

我已经开始使用 Twitter Bootstrap 为我的 UI 开发一个简单的 Web 应用程序，并且我有一个具有溢出-y 属性的 div。我想摆脱默认滚动条并使用一些很酷的自定义滚动条使用 jquery，如this example。我已经用我的嵌套 div 尝试了前面的示例，它采用以下格式。

<div class="row fill"> <div id="users" class="span3 offset1"> <!-- left navigation Pane --> <div id="contentWrapper" class="span7 fill"> <div>Scrollable content here </div>

但是当我尝试实现自定义滚动条时，会显示默认滚动条，当我使用开发人员工具检查它时，自定义组件位于页面顶部的某个位置并且不可见。有什么方法可以开始使用自定义滚动条和引导程序的固定网格布局？我们有这方面的好资源吗？非常感谢您的帮助。

我想我知道问题可能出在哪里了。当我按照上面提到的 jquery 示例进行操作时，在执行时修改了应该可滚动的内容 div，并添加了以下 div 结构。

<div class="content mCustomScrollbar _mCS_1">
<div class="mCustomScrollBox" id="mCSB_1">
<div class="mCSB_container mCS_no_scrollbar">
<div class="mCSB_scrollTools"> ....... </div>
</div>
</div></div>

当内容 div 中已经存在数据时，修改后的代码将其包含在 mCSB_container mCS_no_scrollbar 中，并且可以正常工作as seen here。但是，当内容 div 与用户输入一起动态附加时，在执行期间，文本将被附加到“内容”而不是“mCSB_container mCS_no_scrollba”div。有什么办法可以让它发挥作用吗？谢谢你的帮助。

Answer 1

首先，我敦促谨慎使用自定义滚动条 - 虽然这个想法听起来很吸引人，但我发现它是其中一件看起来应该很容易做到的事情，但实际上有点棘手做对。请记住，人们都习惯于浏览器的原生滚动工作方式。此外，许多用户可能会更改其系统的默认滚动设置，这可能会导致您的解决方案以不同于他们预期的速度滚动。如果您在功能或特性（点击滚动、鼠标滚轮等）中偏离用户期望的太远，您的自定义解决方案将会像拇指一样突出，并且看起来远不如原生滚动条可用。

考虑到这一点，我认为您最好使用现有解决方案，而不是尝试自行开发。我可以推荐jScrollPane - 实际上我只是将它用于一个项目，而且非常容易添加 - 花了我整整 10 分钟，而且添加自己的样式非常容易。不过要特别注意“下载”部分，它依赖于其他几个脚本才能使鼠标滚轮滚动等功能正常工作。