Javascript 如何使用 Bootstrap 创建自定义滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12014285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create custom Scrollbars using Bootstrap?
提问by lazyProgrammer01
I have started working on a simple web application using Twitter Bootstrap for my UI and i have a div with overflow-y property. I wanted to get rid of the default scrollbar and use some cool custom scrollbar using jquery like this example. I have tried the previous example with my nested div which is in the following format.
我已经开始为我的 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>
<div class="row fill">
<div id="users" class="span3 offset1"> <!-- left navigation Pane -->
<div id="contentWrapper" class="span7 fill">
<div>Scrollable content here </div>
But when i try implementing the custom scrollbar, the default one shows up and when i inspected it with the developer tools, the custom component lays somewhere at the top of the page and not visible. Is there any way we could start using custom scrollbars with the fixed grid layout of the bootstrap? Do we have any good resources on this? I would really appreciate your help with this.
但是当我尝试实现自定义滚动条时，默认滚动条出现，当我使用开发人员工具检查它时，自定义组件位于页面顶部的某处，不可见。有什么办法可以开始使用自定义滚动条和引导程序的固定网格布局吗？我们在这方面有什么好的资源吗？我真的很感激你在这方面的帮助。
I guess i figured out where the problem might be. When i followed the jquery example mentioned above, the content div that was supposed to be scrollable was modified while execution and the following div structure added.
我想我想出了问题可能出在哪里。当我按照上面提到的 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>
When there is data already present in the content div, the modified piece of code has it inside mCSB_container mCS_no_scrollbar and it works fine as seen here. But when the content div is dynamically appended with the user input, then during execution, the text is being appended to the 'content' instead of 'mCSB_container mCS_no_scrollba' div. Is there any way we could make it work? Thanks for your help.
当内容 div 中已经存在数据时，修改后的代码段将其包含在 mCSB_container mCS_no_scrollbar 中，并且可以正常工作，如下所示。但是，当内容 div 与用户输入一起动态附加时，在执行期间，文本将附加到“内容”而不是“mCSB_container mCS_no_scrollba”div。有什么办法可以让它发挥作用吗？谢谢你的帮助。
回答by Daniel Schaffer
First, I'd urge caution in using custom scrollbars - while the idea sounds alluring, I've found that it is one of those things that seems like it should be easy to do, but is in fact quite a bit trickier to get right. Keep in mind that people are all used to how their browser's native scrolling works. Additionally, many users may change their system's default scrolling settings, which may cause your solution to scroll at a different speed than they expect. If you stray too far from what the user expects in the functionality or features (clicking to scroll, mousewheel, etc), your custom solution is going to stick out like a sore thumb, and will seem far less usable than native scrollbars.
首先，我敦促谨慎使用自定义滚动条 - 虽然这个想法听起来很诱人，但我发现它是那些看起来应该很容易做到的事情之一，但实际上要做到这一点有点棘手. 请记住，人们都习惯于浏览器的原生滚动方式。此外，许多用户可能会更改其系统的默认滚动设置，这可能会导致您的解决方案以与他们预期不同的速度滚动。如果您在功能或特性（单击滚动、鼠标滚轮等）方面偏离用户期望太远，您的自定义解决方案将像拇指酸痛一样突出，并且看起来远不如原生滚动条有用。
With that in mind, I think you'd be best off using an existing solution rather than trying to roll your own. I can recommend jScrollPane- I actually just used it for a project, and it was very easy to add - took me all of 10 minutes, and it is very easy to add your own styling. Pay particular attention to the "downloads" section though, it relies on a couple other scripts to get things like mousewheel scrolling working correctly.
考虑到这一点，我认为您最好使用现有的解决方案，而不是尝试推出自己的解决方案。我可以推荐jScrollPane- 我实际上只是将它用于一个项目，而且很容易添加 - 花了我整整 10 分钟，而且很容易添加自己的样式。不过要特别注意“下载”部分，它依赖于其他几个脚本来使鼠标滚轮滚动等功能正常工作。
