找到滚动div的底部高度？

Question

我们有一个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;

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