Question

所以我正在检查一些动态生成的内容的scrollHeight，以确定是否在内容中包含更多按钮。用户可以单击更多按钮以展开内容并查看其中的所有内容。但是每次使用相同的函数有时它会说元素的scrollHeight为0，不用说打破了这些元素的功能。我不知道为什么这个函数会在90％的时间内都能正常工作，但有时会说这些元素在它们显然没有滚动时会占用它们（它们会占用页面上的空间）。

这是功能：

function hide_show_expand_button(length){
    var current_div = '';
    var current_span = '';
    //console.log(length);
    for(var i = 0; i < length; i++){
        if(document.getElementById("message_span"+i)){
            current_div = document.getElementById("items_content"+i);
            current_span = document.getElementById("message_span"+i);
            console.log(current_div.scrollHeight, "height of the div")
            if(current_span.scrollHeight > 128 && current_div.scrollHeight < 170){
                console.log("inside of the check for the conversation screen");
                current_div.innerHTML +="<a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button_conversation\" style=\"color:blue;\" onclick='expand_colapse(\""+ i + "\")'>More...</a>";
            } else if(current_span.scrollHeight > 128 && document.getElementById("items_content"+i).scrollHeight > 200 ){
                current_div.innerHTML+="<a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button_attatchment\" style=\"color:blue;\"  onclick='expand_colapse(\""+ i + "\")'>More...</a>";
            } else if(current_span.scrollHeight > 128 && current_div.scrollHeight < 200){
                current_div.innerHTML +="<a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button\" style=\"color:blue;\" onclick='expand_colapse(\""+ i + "\")'>More...</a>";
            }
        }
    }
}

正如你所看到的，我正在检查span和div上的scrollHeight，因为我生成了几种不同类型的单元格，我必须根据单元格的类型将更多按钮放在不同的位置。此函数仅在生成正在检查的内容的函数的末尾被调用，并且我已经尝试了setTimeout()调用它在完全创建它之前通过此函数的微小机会（我不是我知道会发生什么，但谁知道呢。

P.S。这一切都发生在chrome ext内。我不认为这与它有什么关系，但谁知道。此外，元素上的位置是相对的，因为我看到其他人发布了有关position: absolute的scrollHeight问题。

编辑以使其更具体：

希望这有帮助，我试图测量的单元格在一个包含div中，它的显示设置为无几种不同的方式。上面发生的事情发生在我从容器中导航（设置显示为无）然后导航回到它（将显示设置为阻止）的一个实例中。您可以在chrome ext内部以十几种方式执行此操作。但是它只说他们没有一个scrollHeight（或者我尝试使用getBoundingClientRect()的任何高度而且它为一切返回0）对于一个案例，这就是为什么我感到困惑。

同样可能有用的是，在导航回到容器时，每次都会重建单元格，正如我上面所说的，我在函数结束时调用scrollHeight来构建单元格。因此，每当您返回容器时，我的函数也会被调用。

Answer 1

我弄清楚了问题，它与我试图在不同元素设置为无显示之后检查的内容有关。由于某些原因，5-8个单元格正在检查其他内容而不是我所在的页面，然后切换到当前内容。改变一些Id最终让我解决它。

Answer 2

我建议查看这些内容（我找不到Chrome的类似链接）：

MSDN：http://msdn.microsoft.com/en-us/library/ms530302%28v=VS.85%29.aspx

MOZ：https://developer.mozilla.org/en/Determining_the_dimensions_of_elements

似乎scrollHeight仅在某些内容足够大而需要滚动时才有效，因此我认为0表示不需要滚动（所有内容都可见）。从查看上面的链接，也许你想要的是clientHeight。

检查元素的scrollHeight有时会返回0

2 个答案: