我已经开始使用一个简单的Web应用程序使用Twitter Bootstrap为我的UI,我有一个div与overflow-y属性.我想摆脱默认滚动条,并使用像
this example这样的jquery使用一些很酷的自定义滚动条.我已经尝试了以前的例子,我的嵌套div是以下格式.
< div class =“row fill”>
< div id =“users”class =“span3 offset1”> <！ - 左导航窗格 - >
< div id =“contentWrapper”class =“span7 fill”>
< div>可滚动内容< / 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.有什么办法可以让它工作吗？谢谢你的帮助.
解决方法
首先,我会谨慎使用自定义滚动条 – 虽然这个想法听起来很有吸引力,但我发现这是一个似乎应该很容易做到的事情之一,但实际上有点棘手.请记住,人们都习惯于浏览器的本机滚动如何运作.此外,许多用户可能会更改其系统的默认滚动设置,这可能会导致您的解决方案以与预期不同的速度滚动.如果您偏离用户期望的功能或功能(点击滚动,滚轮等)太远,您的定制解决方案将会像拇指一样伸出来,并且看起来远远不如本机滚动条.
考虑到这一点,我认为你最好使用现有的解决方案,而不是试图自己滚动.我可以推荐jScrollPane – 我实际上只用了一个项目,这很容易添加 – 花了我所有的10分钟,这是很容易添加自己的风格.请注意“下载”部分,但它依赖于其他几个脚本来使滚动鼠标滚动正常工作.
