Javascript jQuery在div上滚动

我试图用

jQuery

/

Ajax

建立一个简单的聊天系统，但是我在滚动部分有一个奇怪的行为。当我发布一些东西，或者当我收到一些东西时，滚动条会向上而不是向下。代码如下：

    $('form[name="iview-messages-chat"]').submit(function(e) {
        e.preventDefault();

        var data = {};
        data.msg = $('textarea', this).val();
        data.time = $('#iview-messages-pane .iview-messages-item:last').attr('data-time');
        data.uid = $('input[name="uid"]', this).val();

        $.ajax({
            type: 'POST',
            url: 'index.php?page=messages&action=send',
            data: data,
            dataType: 'json',
        }).done(function(data) {
            $.each(data, function(index,value) {
                var nm = '<div class="clearfix iview-messages-item" style="height:auto;min-height:60px;width:730px;margin:0;" data-cid="'+value.id+'" data-time="'+value.time+'">';
                nm += '<img style="margin-top: 5px;" src="'+value.picture+'" />';
                nm += '<div class="iview-messages-item-info" style="width:630px;">';
                nm += '<div class="iview-messages-item-info-row" style="width:inherit;">';
                nm += '<a href="'+value.profile+'">'+value.first_name+' '+value.last_name+'</a>';
                nm += '<span style="float:right;font-size:11px;">'+value.elapsed_time+'</span>';
                nm += '</div>';
                nm += '<div class="iview-messages-item-info-row">';
                nm += '<span>'+value.content+'</span>';
                nm += '</div>';
                nm += '</div>';
                nm += '</div>';
                $('#iview-messages-pane').append(nm);
            });

            $('form[name="iview-messages-chat"] textarea').val('');
            if (!$.isEmptyObject(data))
            {
                $('#iview-messages-pane').animate({scrollTop: $('#iview-messages-pane').height()}, 800);
            }
        }).fail(function() {
            console.log('error');
        });

        return false;
    });

$（'form[name=“iview messages chat”]'）。提交（函数（e）{
e、 预防默认值（）；
变量数据={}；
data.msg=$（'textarea'，this.val（）；
data.time=$（'#iview messages pane.iview messages item:last'）.attr（'data-time'）；
data.uid=$（'input[name=“uid”]”，this.val（）；
$.ajax({
键入：“POST”，
url:'index.php？page=messages&action=send'，
数据：数据，
数据类型：“json”，
}).完成（功能（数据）{
$.each（数据、函数（索引、值）{
var nm=“”；
nm+=''；
nm+=''；
nm+=''；
nm+=''；
nm+=''+值。经过的时间+''；
nm+=''；
nm+=''；
nm+=''+值。含量+''；
nm+=''；
nm+=''；
nm+=''；
$（“#iview messages pane”）.append（nm）；
});
$（'form[name=“iview messages chat”]textarea'）.val（“”）；
如果（！$.isEmptyObject（数据））
{
$（“#iview消息窗格”）.animate（{scrollTop:$（“#iview消息窗格”）.height（）}，800）；
}
}).fail（函数（）{
console.log（'error'）；
});
返回false；
});

标记

div id="iview-messages-pane">
<div id="iview-messages-pane-handler" class="clearfix">
    <div class="clearfix iview-messages-item" style="height:auto;min-height:60px;width:730px;margin:0;" data-cid="36" data-time="1340591805">
        <img style="margin-top: 5px;" src="http://myiview.me/upload/1/4fda8a23cb3c3_200_200.jpg" />
        <div class="iview-messages-item-info" style="width:630px;">
            <div class="iview-messages-item-info-row" style="width:inherit;">
                <a href="http://myiview.me/index.php?page=profile&uid=1">Filipe Matias</a>
                <span style="float:right;font-size:11px;">19 hours ago</span>
            </div>
            <div class="iview-messages-item-info-row">
                <span>Hmmmmmm yeeelloowww!</span>
            </div>
        </div>
    </div>
</div>
</div>

div id=“iview messages pane”>
19小时前
嗯，是的！

---

有什么提示吗？

可能是@lbstr指出的高度没有达到您期望的高度

$('#iview-messages-pane')
    .animate({
        scrollTop: (function(){
            var combinedHeightOfChildren = 0;
            $('#iview-messages-pane').children().each(function(){
                combinedHeightOfChildren += $(this).outerHeight();
            });
            return combinedHeightOfChildren - $('#iview-messages-pane').height();
        })(); // execute the function immediately
    }, 800);

根据@lbstr建议： 垂直滚动位置与可滚动区域上方视图中隐藏的像素数相同，因此当完全向下滚动时，消息span的高度可见，隐藏部分可见

combinedHeightOfChildren - $('#iview-messages-pane').height();

所以它应该回来

return combinedHeightOfChildren - $('#iview-messages-pane').height();

不会有明显的错误，因为我们无法进一步滚动，只需将此单独设置，以便其他用户可以跟踪发生的情况

这是一把小提琴，上面画着正在演奏的乐曲

---

摆弄添加+滚动

首先，我要做一个

console.log（$（'iview messages pane'）.height（）animate

调用附近的code>并查看它是否合理。您还应该

console.log（$（'iview messages pane'）.scrollTop（））

获取当前滚动值。它在页面加载时一直向下滚动，但当脚本检查新消息时，结果是：

高度：510，滚动：710

。发生这种情况时，滚动条几乎一直向上移动。我可能应该为

#iview messages pane

设置一个内部容器。我唯一能想到的是，您滚动了错误的元素。请包括

#iview messages窗格

及其父级的示例标记。

#iview messages pane

确实是滚动的容器吗？因此，高度是容器的高度，而不是内容的总高度。请尝试下面sabithpocker的答案。从技术上讲，它应该是

返回儿童的组合高度-$（“#查看消息窗格”）.height（）+1无论如何，因为您是对的：容器的高度将始终相同，但其子容器的合并高度将不同，这就是您需要检查的内容。@lbstr容器中的子处理程序的高度始终不同。此外，代码根本不起作用。@sabithpocker——还有一些其他编辑：您需要初始化
var combinedHeightOfChildren=0。另外，您必须执行该函数：
{scrollTop:（函数（）{…}（）（）}
，它才能工作。@yoda请添加您正在使用的HTML/CSS或创建一个jsfiddle@sabithpocker您没有完全正确地执行功能位。我提交了一个需要审阅的编辑，但是您需要执行
{scrollTop:（function（）{…}（）（）}
，并删除在
每个
函数之后添加的额外
（）
。