通过 ajax 向带有自定义滚动条的元素添加内容

Question

下面以div为例。 div这么小是因为我打算给它加一个滚动条。

<div id='main' style='height:300px; overflow-y: auto;'>
   <!-- Content that is long enough to require a scrollbar... -->
</div>

假设我在此 div（malihu 或 jscrollpane）上初始化了一个自定义滚动条，例如，使用以下命令：

jQuery("#main").jScrollPane(); // for jscrollpane
jQuery("#main").mCustomScrollbar(); // for malihu

这暂时还可以，但是当我动态地向div添加数据时，它不会出现在div中，滚动条也没有调整：

jQuery("#main").append("Add this data to the div...");

可能是什么问题？

Answer 1

找到解决方案。创建上述任何滚动条时，它们会向附加的 div 添加两个容器。您必须将内容附加到这些容器，而不是基本 div.

例如，要向 jscrollpane 滚动条添加内容，您使用：

 jQuery("#main").find(".jspPane").html("Data to be added...");

对于 malihu 你会使用：

jQuery("#main").find(".mCSB_container").html("Data to be added...");

Adding content to element with custom scrollbar via ajax