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 に答える