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

【问题标题】：How to get the real scroll height of div (say, inner text size)如何获取 div 的实际滚动高度（例如，内部文本大小）
【发布时间】：2013-12-13 07:54:27
【问题描述】：

我正在尝试制作一个自动滚动的 div，当它到达末尾时会自动滚动到顶部。但它不起作用......

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>

之后，我需要找到如何在“onmouseover”发生时停止滚动。

编辑：我没有清楚地解释问题。事实上，我尝试过类似的方法：

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

问题是 scrollHeight 似乎大于 div 内部文本。因此，返回顶部需要很多时间。

所以我需要一个元素属性，我可以使用它的值与我的计数变量进行比较。但是我不太了解 Javascript，也找不到任何东西。我希望它和我想的一样简单。

【问题讨论】：

函数 sleepscroll() 是什么？
sleepScroll() 是一个实现的函数，我将使用它来停止在事件“onmouseover”上滚动。就我而言，我认为这将是一个简单的 clearTimeout() 调用。

标签： javascript html dom vertical-scrolling

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试：

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

这应该可以满足您的需要。

【讨论】：

【解决方案3】：

我的解决方案涉及到 jQuery，希望这不是问题。

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>

说明： jQuery 的 .height() 内部元素 <p> 为我们提供了您正在寻找的实际高度，但这还不足以到达底部，因为这发生在我们到达元素的高度之前。一点调查显示scrollTop() 的“顶部”大约在原始div 高度的一半处。您可能需要使用divHeight 来获得您正在寻找的确切结果。

当然，我还包括了一个停止和继续滚动的方法。

祝你好运！

【讨论】：

我对JS了解不多，对JQuery一点也不了解。我宁愿找到一个除了 JS 之外什么都没有的解决方案（比如说，最好没有库）。当然，如果我找不到任何其他解决方案，我会考虑你的。无论如何，感谢您的帮助！
我认为不使用 jQuery 就不可能获得元素的实际高度。我建议你花点时间学习它，它是一个非常强大的工具:)

【解决方案4】：

您可以尝试使用 scrollHeight 属性。

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

【讨论】：

你知道吗，我已经想到了 o/ 实际上我首先尝试的是：如果 (count