1

小提琴。我正在制作一个购物清单 web 应用程序，我正在尝试让 div#container有一个 jquery jScrollPane 滚动条。当我添加脚本 src 和 add$('#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});
4

1 回答 1

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

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

api.reinitialise();

在这里更新了小提琴。

于 2013-09-30T18:54:00.910 回答