如何使用引导程序创建自定义滚动条

How to create custom Scrollbars using Bootstrap?

本文关键字：自定义 滚动条 创建 引导程序 何使用      更新时间：2023-09-26

我已经开始为我的UI使用Twitter Bootstrap开发一个简单的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。有什么方法可以让它工作吗？感谢您的帮助。

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

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

相关文章：