javascript 如何获得div的真实的滚动高度(比如内部文本大小)

falq053o 于 2023-02-07 发布在 Java

关注(0)|答案(6)|浏览(194)

我正在尝试做一个自动滚动的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);
}

超文本：

<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很多，我找不到任何东西。我希望它是一样简单，因为我认为它。

JavaScript

来源：https://stackoverflow.com/questions/20246443/how-to-get-the-real-scroll-height-of-div-say-inner-text-size

6条答案

按热度按时间

unhi4e5o1#

试试看：

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

应该够你用了。

赞(0）回复(0）举报 2023-02-07

lawou6xi2#

可以尝试使用scrollHeight属性。
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollHeight

赞(0）回复(0）举报 2023-02-07

w41d8nur3#

我的解决方案涉及到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);
}

超文本：

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

说明：内部元素<p>的jQuery的.height()为我们提供了所需的实际高度，但还不足以到达底部，因为这发生在我们到达元素的高度之前。一个小小的调查表明scrollTop()的"顶部"大约在原始div高度的一半以内。您可能需要试用divHeight以获得所需的确切结果。
当然，我还包括了停止和继续滚动的方法。
祝你好运!

赞(0）回复(0）举报 2023-02-07

v9tzhpje4#

您应该使用scrollHeight属性，但要调用它，需要使用如下索引：

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

赞(0）回复(0）举报 2023-02-07

smdncfj35#

如果你把scrollTop和scrollLeft设置成很高的值，它们只会被设置成最大允许值，我想这正是你所需要的，如果你愿意，你可以用它们来计算滚动中心。
参见片段示例。

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>

赞(0）回复(0）举报 2023-02-07

t9aqgxwy6#

我有一个办法......

function findMaxReach(){
let maxReach =0

document.querySelector('.YourElement').scrollLeft = 100000;
maxReach = document.querySelector('.YourElement').scrollLeft;
document.querySelector('.YourElement').scrollLeft = 0;

return maxReach
}

赞(0）回复(0）举报 2023-02-07

我来回答

javascript 如何获得div的真实的滚动高度(比如内部文本大小)

6条答案

相关问题

热门标签

最新问答