使用 jScrollPane() 时 Div 不显示

Question

这应该非常简单，但是就这样。我有一个简单的 div 容器，由 Twitter feed (jTweetsAnywhere) 填充：

<div id='twitter-feed'></div>

此功能运行良好，并为我提供了一个带有 Twitter feed 的简单容器，并带有 overflow:auto。再说一次：工作正常，溢出可以用标准的丑陋滚动条滚动。

加载 jquery.jScrollPane.min.js、jquery.scrollpane.css、jquery.mousewheel.js 和 mwheelintent.js 并像这样初始化后：

$(document).ready(function(){
    . . .
    $("#twitter-feed").jScrollPane();
});

...#twitter-feed div 不再显示，并且不会引发运行时错误。

想法？

Answer 1

我最初的猜测是 .jsScrollPane() 在 jTweets 返回任何内容之前很久就被调用了。这意味着它很有可能在容器为空时设置容器的高度，因此它可能设置为 0。您是否尝试过为 #twitter-feed 提供静态高度？

Answer 2

遇到同样的问题..并查看内置调试器的 Chrome，我发现了我们的问题并发布在 jscrollpane google 组中..我几乎担心我们可能需要更改 jTweetsAnywhere 代码才能使其正常工作..如果这个是真的，我会这样做并确保我在此处发布解决方案和链接...简而言之：

jTweetsAnywhere 在 jScrollPane 调用之前动态创建此内容：

<div id="twitter-feed">
<div class="jta-tweets-list">
<ul><li>tweet</li><li>tweet</li></ul>
</div>
</div>

在 jScrollPane 调用之后，您的代码#twitter-feed 容器内部被修改为如下功能：

<div id="twitter-feed">
<div class="jta-tweets-list">
<div class="jspContainer"><!-- I believe this is where the tweets <ul> needs to be loaded? --><div class="jspPane"></div></div>
<ul><li>tweet</li><li>tweet</li></ul>
</div>
</div>

Answer 3

jScrollPane.js 有一个漂亮的小方法 autoReinitialise，当设置为 true 时，基本上会添加一个 setInterval()不断检查目标 div 中的内容。

只需在 jTweetsAnywhere 调用之后调用 jScrollPane 即可：

$('.jta-tweets-list').jTweetsAnywhere({ stuff in here })

并通过 autoReinitialise: true 向其传递一个对象 -

$('.jta-tweets-list').jScrollPane(
    {
        autoReinitialise: true
    }

);

希望这有帮助！