JScrollPane不会滚动

Question

我正在尝试在我的网站中使用jquery jscrollpane插件http://jscrollpane.kelvinluck.com/。我按照说明操作，但滚动条什么也没做。我可能忽略了一些简单的事情，但我已经尝试了几个小时，无法弄清楚我做错了什么。我在标题中包含以下内容：

<link type="text/css" rel="stylesheet" href="CSS/style.css">
<link type="text/css" rel="stylesheet" href="CSS/jscrollpane.css">

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Amaranth">
<script src="script/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="script/jquery.jscrollpane.js" type="text/javascript"></script>
<script src="script/jquery.mousewheel.js" type="text/javascript"></script>
<script type="text/javascript">

$(function() {

   $(document).ready(function() {

     var element = $('.scroll-pane').jScrollPane({
            showArrows: true,
            verticalDragMaxHeight: 16,
            horizontalDragMaxWidth: 0,
            contentWidth: '0px'
        });     
    var api = element.data('jsp');
    api.reinitialise(); 

 });
 });

</script>  

以下CSS：

.scroll-pane {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-bottom: 8px;
}

.jspContainer {
    overflow: hidden;
    position: relative;
}
.jspPane {
    position: absolute;
}
.jspVerticalBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
}
.jspCap {
    display: none;
}
.jspHorizontalBar .jspCap {
    float: left;
}
.jspTrack {
    background: url(../images/scroll_bar.png);
    position: relative;
}
.jspDrag {
    background: url(../images/scroll_drag.png) no-repeat;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
}
.jspArrow {
    text-indent: -20000px;
    display: block;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.jspArrowUp {
    width: 12px;
    height: 14px;
    background-image: url(../images/scroll_up.png);
}
.jspArrowDown {
    background-image: url(../images/scroll_down.png);
}
.jspArrow.jspDisabled {
    cursor: default;
}
.jspVerticalBar .jspArrow {
    height: 14px;
}
.jspVerticalBar .jspArrow:focus {
    outline: none;
}
.jspCorner {
    background: #eeeef4;
    float: left;
    height: 100%;
}

这是我的HTML：

<div class="daily_special">
      <div class="pane">
        <div class="scroll-pane jspScrollable" style="overflow: hidden; padding: 0px; width: 240px;" tabindex="0">

        <div class="jspContainer" style="width: 240px; height: 220px;">
            <div class="jspPane" style="padding: 0px; top: 0px; width: 224px;">
                <div style=" width: 210px;">
                    <h3>Weekly Specials</h3>
                    <a><img src="images/weekly_special_home.jpg"></a>
                    Today is the day we release our Spring/Summer menu!! Come down to FSB and try some of our delicious new additions! Cheers!
                    <span>&nbsp;</span>          
                </div>
            </div>
        <div class="jspVerticalBar">
            <div class="jspCap jspCapTop"></div>
            <a class="jspArrow jspArrowUp jspDisabled"></a>
            <div class="jspTrack" style="height: 192px;">
                <div class="jspDrag" style="height: 16px; top: 0px;">
                    <div class="jspDragTop"></div>
                    <div class="jspDragBottom"></div>
                </div>
            </div>
            <a class="jspArrow jspArrowDown"></a>
            <div class="jspCap jspCapBottom"></div>
        </div>
        </div>
        </div>
        <a href="/menu">&gt; view our full MENU</a> </div>
    </div>

我非常感谢任何建议。