How to get the real scroll height of div (say, inner text size)

Question

I'm trying to make a auto-scrolling div that go to its top when it reaches the end. But it doesn't work...

function    scrollPannel()
{
    var pannel = document.getElementById('pannel');
    if (typeof scrollPannel.count == 'undefined')
    {
        scrollPannel.count = 0;
    }
    else
    {
        scrollPannel.count += 2;
    }
// trouble is here
    if ((scrollPannel.count - pannel.scrollHeight) > pannel.clientHeight)
    {
        scrollPannel.count = 0;
    }
    pannel.scrollTop = scrollPannel.count;
    setTimeout('scrollPannel()', 500);
}

HTML:

<div id='pannel'  style="height:200px;overflow:auto" onmouseover="sleepScroll()">
    <p>...</p><!-- long text -->
</div>

And after, I will need to find how to stop scrolling when "onmouseover" occures.

EDIT: I did not explained the problem clearly. In fact, I have tried something like:

if (scrollPannel.count > pannel.scrollHeight)
{
    scrollPannel.count = 0;
}

The problem is that scrollHeight seems greater than div inner text. So it makes a lot of time to return to the top.

So I need an element property of which I could use the value to compare with my count variable. However I don't know Javascript a lot and I could not find anything. I hope it is as well simple as I think of it.

Answer 1

Try:

// calculate max scroll top position (go back to top once reached)
var maxScrollPosition = element.scrollHeight - element.clientHeight;
// example
element.scrollTop = maxScrollPosition;

That should do what you need.

Answer 2

You could try using the scrollHeight property.

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollHeight

Answer 3

The solution I have involves jQuery, hope that's not a problem.

JavaScript:

var timeout;
function scrollPannel()
{
    var divHeight = $("#pannel").height() / 2;
    var scrollCount = $("#pannel").scrollTop();
    var scrollHeight = $("#inside").height() - 20 - divHeight;
    scrollCount += 2;

    if ((scrollCount - scrollHeight) > 0)
    {
        scrollCount = 0;
    }
    $("#pannel").scrollTop(scrollCount);
    timeout = window.setTimeout(scrollPannel(), 100);
}

function scrollStop() {
    window.clearTimeout(timeout);
}

HTML:

<div id='pannel' onmouseover="scrollStop();" onmouseout="scrollPannel();">
    <p id="inside"></p><!-- long text -->
</div>

Explanation: jQuery's .height() of the inside element <p> gives us the actual height you're looking for, but it's not enough for reaching the bottom, since that happens before we reach the element's height. A little investigation shows that the "top" of scrollTop() is about half way inside the original div's height. You may need to play around with divHeight to get the exact results you're looking for.

Of course, I also included a method for stopping and continuing scrolling.

Good luck!

Answer 4

You should use scrollHeight property but to call it, you need to use an index like that:

$('#pannel')[0].scrollHeight;

Answer 5

If you set the scrollTop and scrollLeft to really high silly values they only ever get set as their maximum allowed values which I think is what you need? You can then use them to work out the scroll center if you wished.

See snippet example.

var mB = document.getElementById('myBox');
var mR = document.getElementById('myResult');

// Set the top and the left to silly values
mB.scrollTop = 99999999;
mB.scrollLeft = 99999999;

// They will only end up being set as their max
mR.innerHTML = "maxTop="+mB.scrollTop+"<br>maxLeft="+mB.scrollLeft;

// Now take the max values and divide by 2 to scroll back to middle.
mB.scrollTop = mB.scrollTop/2;
mB.scrollLeft = mB.scrollLeft/2;

#myBox{
overflow:auto;
}
#myContent{
border:1px solid black;
background-color:red;
}

<div id='myBox' style='width:300px;height:300px'>
     <div id='myContent' style='width:500px;height:800px;line-height:800px;'><center>I am the center of the content</center></div>
</div>
<div id='myResult'></div>