Question

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});

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

jScrollPane没有显示在div #container中

1 个答案: