"如何获取 div 的实际滚动高度（例如，内部文本大小）"

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

你应该使用scrollHeight属性，但要调用它，你需要使用这样的索引：

$('#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. You can then use them to work out the scroll center.

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>