jScrollPane未在div＃容器中显示

Question

Fiddle。我正在制作一个购物清单Web应用程序，并且我正在尝试使div 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; 
} 

编辑

您需要创建JScrollPane的对象的引用，使用data('jsp')方法：

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

然后，一旦你追加新的内容，你叫对了reinitialise()方法jScrollpane对象：

api.reinitialise(); 

Updated Fiddle here。