0 
<html>

<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="jScrollPane.css" type="text/css" rel="stylesheet" >
<script src="jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jScrollPane.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="abc">

</div>
</body>

</html>

测试.css

#abc{
    width: 300px;
    height: 300px;
}

测试.js

$(document).ready(function(){

$('#abc').jScrollPane();

setInterval(function(){$('#abc').append('<p>UDB</p>');},1000);

}) ;

我正在尝试创建一个可以在其中添加内容的框，并且当框已满时，可以通过滚动查看内容，例如消息框或通知框。但是每当我尝试添加时，jScrollPane()我都无法通过使用递归添加孩子append()。

4

1 回答 1

1

这是因为 jScrollPane 通过添加 2 个嵌套元素来转换目标元素的 html 标记：jspContainer和jspPane. 所以你应该将元素附加到jspPane里面的元素#abc：

var target = $('#abc').jScrollPane();
setInterval(function()
{
    target.find('.jspPane').append('<p>UDB</p>');
    target.data('jsp').reinitialise();
},1000);

编辑

此外，您应该reinitialise在每次追加后调用以允许 jScrollPane 刷新其尺寸以适应新内容。这是一个工作小提琴：http: //jsfiddle.net/yC5k9/

于 2013-09-08T08:12:48.473 回答