Question

好吧，所以我正在网站上工作，目前我在索引页面上有一个“shoutbox”但是我正在加载来自另一个.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);
        });

这是shoutbox的“主要”HTML

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

然后我在正文ENDS之前使用jScrollpane函数。所以我首先加载内容然后加载jScrollpane。

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

我真的需要帮助，如果您有任何关于如何解决或改进的想法，请告诉我。

Answer 1

您的HTML不适合jScrollPane。

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

只需删除第一个div.jspPane中元素的类jspContainer和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);

---更新

我是你向我们展示的人的替代品：

$(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后立即执行。我打赌执行计划是：

在.messages中启动拳头负载
执行jScrollPane
加载完成

我猜jScrollPane插件没有正确初始化，因为内容为空。我不太了解插件本身，但我想如果内容更改以更新滚动条，你必须刷新它。

使用.load()函数的回调将确保在内容实际加载时初始化jScrollPane：

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

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

2 个答案: