How do I make custom scrollbars with jScrollPane to be alway

I have scrollbars using the jScrollPane plug-in for jQuery.The scrollbar works, all content is with AJAX, so for every ‘page’ load, I add the re-initialization of the scrollbars. But when content is shorter than the page, the scrollbars are not visible.This results in 10px extra space for the content, and that is annoying with items …

via Css Website development » Search Results » ajax:

How do I make custom scrollbars with jScrollPane to be alway

I have scrollbars using the jScrollPane plug-in for jQuery.
The scrollbar works, all content is with AJAX, so for every ‘page’ load, I add the re-initialization of the scrollbars. But when content is shorter than the page, the scrollbars are not visible.
This results in 10px extra space for the content, and that is annoying with items using 100% of the available space.
Anyone an idea how to make the scrollbars visible even when content is not available? Or an alternative CSS way to reserve the space is also fine.
……………………………………

If nobody finds a better solution,
i can already say that i modified jScrollPane plugin, to always show the “track” bar, and if it was going to hide the scrollbar (because content was smaller than the view) i also not append the ‘drag’ bar. though its not a very clean option.
it should be taken further, and also disable / re-enable the up down buttons, adding css functionality not to do hover/active state’s when its disabled… for better usability.
still looking forward to a possible better solution, though i feel that i will have come up with the only possible solution as there probably is none out of the box
……………………………………

I think until this feature is added to jScrollPane there are only dirty tricks available to fix this. What I did was to ask jScrollPane if scrolling is enabled; if not, I added a div that looks like an empty/disabled scrollbar. This is the code:
var scrollPane = $(“#id-of-scroll-area”);
scrollPane.css(“height”, “100%”); // I needed this; you may not
var scroll = scrollPane.jScrollPane();
// check if scrolling is enabled
if (!scroll.data(‘jsp’).getIsScrollableV())
scrollPane.css(“overflow-y”, “hidden”);
scrollPane.css(“width”, leftPane.width() – 10); // 10 is width of scroll bar
scrollPane.after(‘

‘);
Hop this helps someone… Markus
This is the CSS for the dummy scroll bar:
#white-v-bar
height:100%;
width:10px;
background-color:white;
float:left;

For more info: How do I make custom scrollbars with jScrollPane to be alway

Css Website development » Search Results » ajax

How do I make custom scrollbars with jScrollPane to be alway

Share this post:

Related Posts

Leave a Comment