javascript - 检查元素的scrollHeight有时返回0

因此，我正在检查一些动态生成的内容的scrollHeight，以确定是否在内容中包括更多按钮。用户可以单击更多按钮以展开内容并查看其中的所有内容。但是有时每次使用相同的功能时，它会说元素的scrollHeight为0，这不用说破坏了这些元素的功能。对于该功能为何在90％的时间内都能正常工作，我感到无所适从，但有时会说，当元素明显起作用时，它们就没有scrollHeight（它们占用了页面空间）。

这是函数：

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，因为正在生成几个不同类型的单元格，并且必须根据单元格的类型将more按钮放在不同的位置。此函数仅在生成要检查的内容的函数末尾被调用，而我尝试使用setTimeout()调用它的可能性很小，因为它在完全创建之前已经通过了此函数（我不知道怎么会发生，但谁知道）。

附言这都是在chrome ext内部进行的。我认为这与它无关，但谁知道呢。元素上的位置也是相对的，因为我已经看到其他人发布了有关position: absolute的scrollHeight问题的信息。

编辑以使其更具体：

希望这会有所帮助，我要测量的单元格位于一个包含div的单元格中，该单元格的显示设置没有几种不同的方式。上面发生的事情发生在以下情况之一：从容器导航离开（将显示设置为无），然后又导航回到容器（将显示设置为阻止）。您可以在chrome ext内部以大约十二种方式执行此操作。但是它只说在一种情况下，它们没有scrollHeight（或者我尝试使用getBoundingClientRect()设置的任何高度，对于所有情况它都返回0），这就是我感到困惑的原因。

在导航回到容器时，每次都会重新构建单元格，这可能也是有用的，正如我上面所说的，在构建单元格的函数结尾处调用了获取scrollHeight的函数。因此，每次回到容器时，我的函数也会被调用。

最佳答案

我发现了问题，这与在将不同元素设置为不显示之后我要检查的内容有关。由于5-8个单元格的某种原因，它正在检查其他内容而不是我所在的页面，然后切换到当前内容。更改一些ID最终让我修复了它。