Question

i’m trying to set up the jScrollpane plugin for jquery. I followed exactly the how to @ http://jscrollpane.kelvinluck.com/#usage but unfortunately the scroll bars don’t show up. If I remove the plugin, standard system scrollbars are shown (as expected).

Here is the code. In the head tag of my page I have:

<!-- my CSSs -->
<link media="all" type="text/css" href="/artwriter/resources/styles/jquery.jscrollpane.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!-- my scripts -->
<script src="/artwriter/resources/js/artwriter.js" type="text/javascript"></script>
<script src="/artwriter/resources/js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="/artwriter/resources/js/jquery.jscrollpane.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
    $(".scroll-pane").jScrollPane();
});
</script>

where ‘.scroll-pane’ is the class of my div tag.

I have tried with webkit web developer tools and every link looks correct, but scrollbar don’t show up.
I’m using the latest version of the plugin (I just downloaded it from the plugin site).
Any idea?

Thanks,
Stefano

Answer 1

the problem was definitely trivial in my case: simply, the content must be placed inside a < p > or a < div > i.e.:

<div class="scrollable">
MY CONTENT BLA BLA BLA
</div>

wont’ work, you have to write

<div class="scrollable">
<p>MY CONTENT BLA BLA BLA</p>
</div>

Hope this will help,

Stefano