jScrollPane没有显示在div #container中

时间:2013-09-30 16:26:36

标签: javascript jquery html css jquery-jscrollpane

Fiddle。我正在制作一个购物清单Web应用程序,我正在尝试使div #container有一个jquery jScrollPane滚动条。当我添加脚本src并添加$('#container').jScrollPane({showArrows: true});时,滚动条不会显示。

HTML(整个身体):

<div id='top'>Kitchen List</div>
<br />
<div id='container'>
<input type='text' id='input'><button id='click'>Add</button>
<ol></ol>
<div id='error'>Please enter a grocery item<br /><button id='eb'>Close</button></div>
</div>

CSS(整个风格):

body {
    margin: 0;
    padding: 0;
    background: #252525;
    color: #96f226
}
#top {
    width: 100%;
    height: 40px;
    background: #96f226;
    text-align: center;
    font-size: 30px;
    color: #252525;
    position: relative;
    position: fixed;
}
#container {
    margin-top: 40px;
}
#input {
    background: #4a4a4a;
    border: 1px solid #454545;
    color: #96f226;
}
#input:hover {
    background: #656565;
}
#input:focus {
    box-shadow: 0 0 30px #96f226
}
#click {
    background: #4a4a4a;
    border: 1px solid #454545;
    border-radius: 0;
    color: #96f226;
    cursor: pointer;
}
#click:hover {
    background: #656565;
}
#click:active {
    box-shadow: 0 0 30px #96f226;
}
#click:focus {
    box-shadow: 0 0 30px #96f226;
}
#error {
    height: 55px;
    width: 100%;
    background: red;
    text-align: center;
    font-size: 23px;
    color: orange;
}
#eb {
    background: orange;
    color: red;
    border-radius: 0;
    border: 0;
    cursor: pointer
}
#eb:hover {
    background: #e59400;
}
#eb:active {
    box-shadow: 0 0 30px #e59400;
}
#check {
    width: 15px;
    height: 15px;
    background: #4a4a4a;
    cursor: pointer
}
#check:hover {
    background: #656565;
}
#check:active {
    box-shadow: 0 0 30px #96f226
}
#check.active {
    background: #96f226
}

JS / JQuery(仅适用于滚动条):

$('#container').jScrollPane({showArrows: true});

1 个答案:

答案 0 :(得分:0)

如果将以下内容添加到容器的css中:

#container {
    margin-top: 40px;
    width: 100%;
    height: 300px;
    overflow: auto;
}

<强>被修改

您需要使用data('jsp')方法创建对jScrollpane对象的引用:

var contentPane = $('#container');
contentPane.jScrollPane({showArrows: true});
var api = contentPane.data('jsp');

然后,一旦添加了新内容,就可以针对jScrollpane对象调用reinitialise()方法:

api.reinitialise();

Updated Fiddle here