jScrollpane动态加载的内容，而不是滚动

Question

好的，所以我在一个网站上工作，目前我在索引页面有一个“喊话器”，但是我从另一个.php文件加载呼喊问题是，滚动条出现了，但我实际上不能滚动，此刻在数据库中有6条正在加载的留言，但我只能看到4个，我无法再向下滚动。

如果你想为自己在这里检查出的问题是链接到该网站（进展）http://ecazs.net/beerandguns/index.php

你只能看到4，但我可以向你保证有6个！

这是我用来加载留言的代码。

$(document).ready(function(){ 
      $('.messages').fadeIn("slow").load('shoutbox/load.shouts.php'); 
      setInterval(function() { 
       $(".messages").load("shoutbox/load.shouts.php"); 
      }, 2000); 
     }); 

这是上留言

<div id="chat" class="jspScrollable"> 
<div class="jspContainer" style="width: 620px; height: 327px;"> 
    <div class="jspPane" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 600px; top: 0px; "> 
     <form action="" method="post" class="shout"> 
      <p> 
       <label for="message" class="msglabel">Message:</label> 
      </p> 
      <p> 
       <textarea name="message" id="message" class="msgfield" rows="2" cols="95"></textarea> 
      </p> 
      <p> 
       <input type="image" name="submit" src="ext/images/submit_btn.png" value="" class="submit" onmouseover="this.src = 'ext/images/submit_btn_hover.png';" onmouseout="this.src = 'ext/images/submit_btn.png';"/> 
      </p> 
     </form> 
    <div class="messages"></div> 
</div> 

然后我用JScrollPane的函数体结束之前的 “主” HTML。所以我首先加载内容然后jScrollpane。

$(function(){ 
      $('#chat').jScrollPane(); 
     }); 

我真的需要这方面的帮助，如果您对如何解决此问题有任何想法或请改进，请让我知道。

Answer 1

你的HTML是不好的JScrollPane中。

#chat中有两个.jspContainer和.jspPane。

只需卸下类jspContainer和jspPane在第一div.jspPane

元素和必须使用的回调函数加载，告诉JScrollPane的内容发生变化。 你的JS应该是这样的：

//caching element 
var messages = $('.messages'), chat = $('#chat'); 
messages.fadeIn("slow"); 
var loadChatContent = function() { 
    messages.load('shoutbox/load.shouts.php', chat.jScrollPane); 
} 
loadChatContent(); 
setInterval(loadChatContent, 2000); 

---更新

我是一个JS更换为一个你告诉我们：

$(document).ready(function() { 
    //caching element 
    var messages = $('.messages'), chat = $('#chat'); 
    messages.fadeIn("slow"); 
    var loadChatContent = function() { 
     messages.load('shoutbox/load.shouts.php', chat.jScrollPane); 
    } 
    loadChatContent(); 
    setInterval(loadChatContent, 2000); 
}); 

在您的网站（不是你的代码所示）您的html包含两个div.jspContainer和两个div.jspPane，如果您不从第一个div.jspPane 中删除类，它将不起作用您的代码：

<div style="width: 640px; height: 327px;" class="jspContainer"> 
    <div style="padding: 5px 10px; width: 600px; top: 0px;" class="jspPane"> 
     <div class="jspContainer" style="width: 620px; height: 327px;"> 
      <div class="jspPane" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 600px; top: 0px; ">      
      </div> 
     </div> 
     <div class="jspVerticalBar"> 
      <div class="jspCap jspCapTop"></div> 
      <div style="height: 327px;" class="jspTrack"> 
       <div style="height: 318px;" class="jspDrag"> 
        <div class="jspDragTop"></div> 
        <div class="jspDragBottom"></div> 
       </div> 
      </div> 
      <div class="jspCap jspCapBottom"></div> 
     </div> 
    </div> 
</div> 

jScrollPane会将滚动条与第一个div.jspPane的内容的高度一致，但在div.jspPane中，您有第二个div.jspContainer，它的高度为327px。所以jScrollPane认为没有更多的内容可以显示。只需删除对应于我的第3行和第4行的类jspContainer和jspPane，并修改您的js，我认为它可以像那样工作。

Answer 2

嗯，你不能确保jScrollPane（）在内容实际加载后调用，只需将代码放在页面的末尾。这两个代码都放在一个DOMready事件处理程序中，因此它们最终都在加载dom时立即执行。我敢打赌，执行计划是：

1. 发起拳头负荷.messages
2. 执行JScr​​ollPane的
3. 负载完成

我猜是因为内容为空JScrollPane的插件不正确初始化。我对这个插件本身了解不多，但是如果内容更改为更新滚动条，我想你还是必须刷新它。

使用.load()功能的回调将确保你初始化JScrollPane的当内容实际上已经加载：

$(".messages").load("shoutbox/load.shouts.php", function() { 
    $('#chat').jScrollPane(); 
});