如何使用Bootstrap创建自定义Scrollbars？

Question

我已经开始使用Twitter Bootstrap为我的UI开发一个简单的Web应用程序,我有一个带有overflow-y属性的div.我想摆脱默认滚动条并使用jquery使用一些很酷的自定义滚动条,就像这个例子一样.我用我的嵌套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中,并且它可以正常工作,如此处所示.但是当内容div动态地附加用户输入时,则在执行期间,文本被附加到"内容"而不是"mCSB_container mCS_no_scrollba"div.有什么方法可以让它发挥作用吗？谢谢你的帮助.

Answer 1

首先，我强烈建议谨慎使用自定义滚动条 - 虽然这个想法听起来很诱人，但我发现它是那些看起来应该很容易做到的事情之一，但实际上要做好是相当困难的。请记住，人们都习惯了浏览器的本机滚动工作方式。此外，许多用户可能会更改系统的默认滚动设置，这可能会导致您的解决方案以与他们预期不同的速度滚动。如果您在功能或特性上偏离用户期望太远（单击滚动、鼠标滚轮等），那么您的自定义解决方案将会像拇指酸痛一样突出，并且看起来比本机滚动条实用性要差得多。

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