找到滚动div的底部高度? [英] Find the bottom height of a scroll div?

问题描述

我们有一个div，我需要找到它的最大滚动高度大小. 目前，我的聊天记录有12条消息，高度为800px，但是当我使用以下代码时:

We have a div, and I need to find the maximum scroll height size of it. My chat, currently, with 12 messages, has 800px height, but when I use this code:

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

它只会找出div的高度，而不是整个滚动向下，它将显示490px. 但是我想找到最底端的最大高度.

It will only find out the height of the div, not the whole scroll to down, it will say 490px. But I want to find the maximum height, to the bottom.

从顶部到底部滚动.

我为什么需要这个?，由我解决这个悬赏问题:

Why do I need this? to solve this bounty question by me: AJAX Chat - Automatically drag the scroll down, but don't drag it when the user is scrolling up?

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

Basically what I can do is, when sending a message, do checking:

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;

推荐答案

我根据之前的评论提出了一些建议:

I whipped up a little something based on my previous comment: 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;
});

这篇关于找到滚动div的底部高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！