0

div があり、最大スクロール高さのサイズを見つける必要があります。現在、12 件のメッセージを含む私のチャットの高さは 800px ですが、このコードを使用すると、次のようになります。

var trueDivHeight = $('#chat')[0].scrollHeight;

スクロール全体ではなく、divの高さのみがわかり、490pxと表示されます。しかし、私は底までの最大の高さを見つけたいです。

スクロールの上から下へ。

なぜこれが必要なのですか？私がこの報奨金の質問を解決するには: AJAX チャット - スクロールを自動的に下にドラッグしますが、ユーザーが上にスクロールしているときはドラッグしませんか?

基本的に私ができることは、メッセージを送信するときにチェックすることです：

if (checkScroll(trueDivHeight)) { //Runs the function checkScroll with max div height.
    scrollDown = true; // turn true if it was true.
}

if (scrollDown) {
    setInterval(function () {
        scrollToBottom(); // scroll to bottom 1 second after posted message..
    }, 1000);
}

そして私が使用できる機能：

function scrollToBottom() {
    $('#chat').scrollTop(bottom); // Makes scroll go to the most bottom.
}

function checkScroll(size) {
    if ($("#chat").scrollTop() == size) { // Checks if current scroll position equals to the max bottom position.
        return true; // if yes, return true.
    }
}

しかし問題は、 trueDivHeight がスクローラーの高さ全体を上から下まで見つけられないことです。もしそうなら、それは私のために働くでしょう。

何か案は？

編集：

var trueDivHeight = $('#chat')[0].scrollHeight; // finds the max bottom px
var divHeight = $('#chat').height();
var bottom = $('#chat')[0].scrollHeight;
4

3 に答える 3

0

私のソリューションは Mondjudge に似ていますが、いくつかの点で異なります。

全体ではなく、スクロールの現在の位置が必要です!

私のリロード:

function reload() {
    var oldscrollHeight = ($("#chat").scrollTop() + 470);
    console.log(" old: " + oldscrollHeight);
    $.post("ajax.php", { loadMessages : "1" }, function(data) {
        $(".discussion").html(data); 
        var newscrollHeight = $("#chat").prop("scrollHeight");
        console.log(" new: " + newscrollHeight);
        if(newscrollHeight < (oldscrollHeight + 150)) {
            var height = $('#chat')[0].scrollHeight;
            $('#chat').scrollTop(height);
        }           
    });     
}
于 2013-06-27T22:47:56.070 に答える
0

チャットでスクロールを行った方法を見てみましょう: https://github.com/mondjunge/Crush-Framework/blob/master/javascript/chat/main.js

データを取得する前に、現在の scrollHeight を取得します。新しい可能性のあるメッセージを取得した後、scrollHeight が大きくなったかどうかを確認し、そうであれば一番下までスクロールします。このようにして、新しいメッセージがポップアップしない限り、ユーザーはスクロールできます。

コードは次のとおりです。

function getData() {
var oldscrollHeight = $("#chatWindow").attr("scrollHeight") - 20;
var room = $("#chatRoom").val();
var chatUrl = "?m=load&room="+room;

if(!firstRun){
    //alert("something");
    chatUrl = "?m=idle&room="+room;
}       

$.ajax({
    type: "POST",
    url: chatUrl,
    async: true,
    timeout: 30000,
    data: "get=true",
    success: function(html){
        var htmlArr = html.split('<!--USERLIST-->');
        //alert(htmlArr[1]);
        $("#userList").html(htmlArr[1]);
        if(firstRun){

            $("#chatWindow").html(htmlArr[0]);
            firstRun = false;
        }else{
            $("#chatWindow").append(htmlArr[0]);
        // alert('idle');
        }

        //$("#chatWindow").html(html);
        //Insert chat log into the #chatbox div             
        var newscrollHeight = $("#chatWindow").attr("scrollHeight") - 20;
        if(newscrollHeight > oldscrollHeight){
            $("#chatWindow").animate({
                scrollTop: newscrollHeight
            }, 'normal'); //Autoscroll to bottom of div
        }

        setTimeout("getData()", 1000);

    }
});

あなたの問題を理解できたと思います。これは実際には質問に答えていないと思いますが、データを取得するたびにスクロールすると、実装が誤った方向に進んでいると確信しています。トリガーされるイベントをできるだけ少なくします。

于 2013-06-27T21:26:06.550 に答える