找到滚动div的底部高度？

Question

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

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