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.
<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 ponent 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.
<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.
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.
<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 ponent 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.
<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.
Share Improve this question edited Aug 18, 2012 at 9:09 lazyProgrammer01 asked Aug 17, 2012 at 23:16 lazyProgrammer01lazyProgrammer01 1311 gold badge2 silver badges7 bronze badges 6-
Could you post a simplified example at jsfiddle, it would really help. I've have css problems with Bootstrap in some occasions due to the fact that they use global styles that may override the plugin's styles. Still don't get why they don't use a namespace like
bs, no pun intended. – elclanrs Commented Aug 17, 2012 at 23:24 -
@elclanrs: but that definitely was
punny:) – raidenace Commented Aug 17, 2012 at 23:35 - @elclanrs, I guess i figured out the problem. When i am using the jquery plugin, the div which i select as scrollable is modified during execution and the following div pattern is included `` – lazyProgrammer01 Commented Aug 18, 2012 at 8:34
- @elclanrs : Modified the question :), i guess it should be clear now. – lazyProgrammer01 Commented Aug 18, 2012 at 9:10
- 9 Please don't use custom scrollbars; they are the worst. – Evan Davis Commented Apr 16, 2013 at 19:18
1 Answer
Reset to default 2First, 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 remend 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.