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/ add+scrollでフィドル!!

于 2012-06-25T21:38:07.860 に答える