javascript - jScrollPane 未显示在 div #container 中

Question

Fiddle .我正在制作一个杂货 list 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});

Answer 1

如果您将以下内容添加到容器的 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 .