スクロールの下にテキストを追加してください

Question

チャットボックスを作成しました。最初はボトムにスクロールし、スクロールバーはユーザーがスクロールするまで残ります。下に移動するスクロールバーの代わりに新しいテキストが挿入されます同じ位置にある。

<script> 
var currentID = null; 
var chatTimer = null; 
var scrolled=false; 
function fetch_data() { 
    $.ajax({ 
    url: "select.php", 
    method: "POST", 
    success: function(data) { 
     $('#live_data').html(data); 
     //fetch_chat(); 
    } 
    }); 
} 

function fetch_chat() { 
    $.ajax({ 
    url: "fetch_chat.php", 
    method: "POST", 
    data: { 
     id: currentID 
    }, 
    dataType: "text", 
    success: function(data) { 
     $("#messages").show(); 
     $('#messages').html(data); 
     $("div.area").show(); 
     //chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time 
     if(!scrolled){ 
     $("#messages").animate({ scrollTop: $(document).height() }, "fast"); 
    } 

    } 

    }); 

} 

$(document).ready(function() { 
     $("#messages").on('scroll',function(){ 
     scrolled=true; 
    }); 
fetch_data(); 

    $(document).on('click', '.first_name', function() { 
    currentID = $(this).data("id1"); 
    //immediately fetch chat for the new ID, and clear any waiting fetch timer that might be pending 
    //clearTimeout(chatTimer); 
    fetch_chat(); 
    }); 

    function scrollToBottom() { 
    $("#messages").scrollTop(1e10); // Lazy hack 
} 

setInterval(function() { 
    fetch_chat(); 
}, 500); 

    $("#sub").click(function() { 
    var text = $("#text").val(); 

    $.post('insert_chat.php', { 
     id: currentID, 
     msg: text 
    }, function(data) { 
     $("#messages").append(data); 
     $("#text").val(''); 
     scrollToBottom(); 
    }); 
    // alert(text); 
    }); 

    //this will also trigger the first fetch_chat once it completes 
}); 
</script> 

ユーザーが新しいテキストを入力した後でも、そのスクロールを下に保持したいだけです。 スクロールは常に下にとどまるべきですが、スクロール可能な場合はスクロール可能にしてください。

Answer 1

まず、このようにjQueryを使用して、現在のチャットボックスの高さを読ん

var scrollToheight = $("#message").height(); 

そしてscrollTopスプライトjQueryの関数にこの高さを使用します。

$("#message").scrollTop(scrollToheight); 

これはいつもあなたのために働く必要があります。