Home/ Questions/Q 351781
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T11:40:33+00:00

I have a jQuery scrollbar in a static html page. The code works fine

  • 0

I have a jQuery scrollbar in a static html page. The code works fine when it is standalone, but when placed inside a div in my webpage, it doesnt work properly.

When you go to click and drag the scrollbar it doesn’t select the scrollbar and it doesn’t even let you drag and scroll. However, the up and down arrows allow you to scroll. Occasionally after multiple clicks it will allow you to drag the scroll bar.

Any ideas!?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
    <head>
        <title>jScrollPane example skins (operating system style scrollbars)</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" media="all" href="css/stylesheet.css" />
        <link rel="stylesheet" type="text/css" media="all" href="css/jScrollPane.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>

        <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="js/jScrollPane.js"></script>
        <style type="text/css">


        </style>
        <script type="text/javascript">

            $(function()
            {
                // this initialises the demo scollpanes on the page.
                $('#pane1').jScrollPane({showArrows:true, scrollbarWidth: 17});
                $('#pane2').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
                $('#pane3').jScrollPane();
+               $('#pane4').jScrollPane({scrollbarOnLeft:true});
            });

        </script>
    <script src="/mint/?js" type="text/javascript"></script>
</head>
    <body>


            <h3>#pane5 (normal OS provided)</h3>
            <div id="pane4" class="scroll-pane">
                <p>&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimecelerisque. Vestibulum tellus dolor, porta quis, facilisis nec, convallis vitae, quam. Quisque nisi. Nunc vitae nulla vel turpis mollis molestie. Etiam vitae massa.&lt;</p>

            </div>
        </div>
    </body>
</html>


#pane1, #pane2, #pane3, #pane4 {
height:200px;
}
jScrollPane.css (line 67)
.scroll-pane {
background-color:#FFFFFF;
float:left;
height:538px;
left:0;
overflow:auto;
padding-left:2px;
position:absolute;
top:0;
width:635px;
}
stylesheet.css (line 181)
html, div, map, dt, isindex, form {
display:block;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If the example you posted is correct, then you have an extra ‘+’ sign.
    Between line

    $(‘#pane3’).jScrollPane();

    and

    $(‘#pane4’).jScrollPane({scrollbarOnLeft:true});

    is an extra ‘+’. So there it’s actually:

    $('#pane3').jScrollPane();
+               $('#pane4').jScrollPane({scrollbarOnLeft:true});

    That can’t be helping matters, so you should delete that ‘+’, though it may or may not be the cause your problem.

    Also, you might try wrapping your javascript in a :

    $(document).ready(function() { ... });

    I don’t know if it will work, but it’s possible your executing the code before the html DOM elements are loaded.
    I could be wrong, however.

    Example:

    $(document).ready(function() {
       // this initialises the demo scollpanes on the page.
       $('#pane1').jScrollPane({showArrows:true, scrollbarWidth: 17});
       $('#pane2').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
       $('#pane3').jScrollPane();
        $('#pane4').jScrollPane({scrollbarOnLeft:true});
      });
    • 0