0

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;
    });

标记

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>

有小费吗？

4

1 回答 1

2

正如@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 建议：垂直滚动位置与在可滚动区域上方的视图中隐藏的像素数相同，因此当完全向下滚动时，消息窗格的高度是可见的，隐藏部分是

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

所以它应该返回

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

由于我们无法进一步滚动，因此不会出现明显的错误，只是将其分开，以便其他用户可以关注发生的事情。

http://jsfiddle.net/sabithpocker/sgu6p/这是一个显示工作的小提琴

http://jsfiddle.net/sabithpocker/sgu6p/1/摆弄添加+滚动！！

于 2012-06-25T21:38:07.860 回答