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

时间:2012-08-17 23:16:57

标签: javascript jquery jquery-ui twitter-bootstrap

我已经开始使用Twitter Bootstrap为我的UI开发一个简单的Web应用程序,并且我有一个带有overflow-y属性的div。我想摆脱默认滚动条并使用像this example这样的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中,并且它可以正常工作as seen here。但是当内容div动态地附加用户输入时,则在执行期间,文本被附加到“内容”而不是“mCSB_container mCS_no_scrollba”div。有什么方法可以让它发挥作用吗?谢谢你的帮助。

1 个答案:

答案 0 :(得分:2)

首先,我要求谨慎使用自定义滚动条 - 虽然这个想法听起来很诱人,但我发现它似乎应该很容易做到,但实际上相当棘手为了正确。请记住,人们已经习惯了浏览器的原生滚动工作方式。此外,许多用户可能会更改其系统的默认滚动设置,这可能会导致您的解决方案以不同于预期的速度滚动。如果你偏离用户对功能或功能的期望太远(点击滚动,鼠标滚轮等),你的自定义解决方案会像拇指一样伸出,并且看起来远不如本机滚动条那么有用。

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