jScrollpane動態加載的內容，而不是滾動

好的，所以我在一個網站上工作，目前我在索引頁面有一個「喊話器」，但是我從另一個.php文件加載呼喊問題是，滾動條出現了，但我實際上不能滾動，此刻在數據庫中有6條正在加載的留言，但我只能看到4個，我無法再向下滾動。jScrollpane動態加載的內容，而不是滾動

如果你想爲自己在這裏檢查出的問題是鏈接到該網站（進展）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(); 
     });

我真的需要這方面的幫助，如果您對如何解決此問題有任何想法或請改進，請讓我知道。

來源

2012-01-28 Ecaz

你的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，我認爲它可以像那樣工作。

來源

2012-01-28 13:25:54 dievardump

我真的很抱歉，但我不知道該怎麼做，我知道我不應該要求太多，但如果你有耐心幫助我，我會很樂意欣賞它。首先，如果我沒有jspContainer和jScrollpane，那麼滾動條根本就沒有出現：/ 那麼，JS代碼是我已經做的還是將它添加到其他地方的替代品？ – Ecaz 2012-01-28 13:40:59

我更新了我的答案，更精確 – dievardump 2012-01-28 13:56:07

好吧，所以我刪除它，但然後滾動條根本沒有加載，所以我加$（'＃聊天'）。jScrollPane（）;在loadChatContent函數中的messages.load之後，它現在正在工作，但我不知道這是否是正確的方式。太糟糕了，它實際上並沒有淡入，但我可以忍受。 – Ecaz 2012-01-28 14:04:51

嗯，你不能確保jScrollPane（）在內容實際加載後調用，只需將代碼放在頁面的末尾。這兩個代碼都放在一個DOMready事件處理程序中，因此它們最終都在加載dom時立即執行。我敢打賭，執行計劃是：

發起拳頭負荷.messages
執行JScrollPane的
負載完成

我猜是因爲內容爲空JScrollPane的插件不正確初始化。我對這個插件本身瞭解不多，但是如果內容更改爲更新滾動條，我想你還是必須刷新它。

使用.load()功能的回調將確保你初始化JScrollPane的當內容實際上已經加載：

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

來源

2012-01-28 13:20:45

jScrollpane動態加載的內容，而不是滾動

回答

相關問題