Question

我们有一个div，我需要找到它的最大滚动高度大小。我的聊天目前有12条消息，高度为800px，但是当我使用这段代码时：

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

它只会找出div的高度，而不是整个滚动向下，它会说490px。但是我想在底部找到最大高度。

从滚动的顶部到底部。

为什么我需要这个？来解决我的这个赏金问题：AJAX Chat - Automatically drag the scroll down, but don't drag it when the user is scrolling up?

基本上我可以做的是，在发送信息时，请检查：

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;

Answer 1

我根据之前的评论煽起了一些事情：http://jsfiddle.net/9pZ6F/2/

var $container = $('#container'),
    $content = $('#content'),
    $line = $('.line').clone(),
    userScrolling = false;

function setScrollTop(val) {
    $container
        .off('scroll')
        .one('scroll', function()
             {
                 $container.on('scroll', userScroll);
             })
        .scrollTop(val);
}

function scrollToNewLine() {
    if(!userScrolling) {
        setScrollTop(99999999999);
    }
}

/* Add new lines randomly */
function addNewLine() {
    var newLineTiming = Math.round(Math.random() * 3000);

    setTimeout(function() {
        $content.append($line.clone());

        scrollToNewLine();

        addNewLine();        
    }, newLineTiming);
}

addNewLine();

function userScroll() {
    userScrolling = true;

    var scrollTop = $container.scrollTop();

    setScrollTop(scrollTop + 1);

    if(scrollTop == $container.scrollTop()) {
        userScrolling = false;
    }
}

$container.on('scroll', userScroll);

$('button').on('click', function()
{
    userScrolling = false;
});

Answer 2

看看我在聊天中滚动的方式：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);

    }
});

我希望我理解你的问题。我相信这并没有真正回答这个问题，但是如果你每次获取数据都滚动，我相信你的实现是假的。保持触发事件尽可能少。

Answer 3

我的解决方案类似于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);
        }           
    });     
}

找到滚动div的底部高度？

3 个答案: