Menu
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 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.
<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.
351
Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element). Then add the data-target attribute with a value of the id or the class name of the navigation bar ( . navbar ). This is to make sure that the navbar is connected with the scrollable area.
It can be done by the following approach: Approach: Making all the div element in next line using position: absolute; property (arrange all div column-wise). Adding the scroll bar to all the div element using overflow-y: scroll; property.
If you want to add a scrollbar to an element like a <div>, you'll have to use the CSS overflow property. Scrollbars can be vertical (Y-axis) or horizontal (X-axis). Implementing a custom scrollbar to elements is the same. In this example, I'll create vertical custom scrollbar on a <div>, which is just 5px wide.
Suppose we want to add a scroll bar option in HTML, use an “overflow” option and set it as auto-enabled for adding both horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.
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.
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
