Question

<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>

test.css

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

test.js

$(document).ready(function(){

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

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

}) ;

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

Answer 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/

jScrollPane停止使用.append（）插入子元素

1 个答案: