Question

我正在尝试制作一个自动滚动的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内部文本更大。所以它会花很多时间回到顶端。

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

Answer 1

尝试：

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

那应该做你需要的。

Answer 2

您可以尝试使用scrollHeight属性。

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

Answer 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>

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

当然，我还提供了一种停止和继续滚动的方法。

祝你好运！

Answer 4

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

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

如何获得div的真实滚动高度（比如内部文本大小）

4 个答案: