Javascript 检查有时返回0的元素的滚动高度

因此，我正在检查一些动态生成的内容的滚动高度，以确定是否在内容中包含更多按钮。用户可以单击“更多”按钮展开内容并查看其中的所有内容。但是，每次使用相同的函数时，有时会显示元素的滚动高度为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>";
            }
        }
    }
}

函数隐藏显示展开按钮（长度）{
var电流_div=“”；
var电流_跨度=“”；
//控制台日志（长度）；
对于（变量i=0；i128和当前滚动高度<170）{
log（“检查对话屏幕的内部”）；
当前_div.innerHTML+=“”；
}else if（当前滚动高度>128&&document.getElementById（“项目内容”+i）.scrollHeight>200）{
当前_div.innerHTML+=“”；
}否则如果（当前滚动高度>128和当前滚动高度<200）{
当前_div.innerHTML+=“”；
}
}
}
}

正如您所看到的，我正在检查span和div上的滚动高度，因为我有两个不同类型的单元格正在生成，我必须根据单元格的类型将“更多”按钮放置在不同的位置。这个函数只在生成要检查的内容的函数结束时被调用，我尝试了

setTimeout（）

调用，因为它在完全创建内容之前通过这个函数的可能性很小（我不知道会发生什么，但谁知道呢）

另外，这一切都发生在chrome ext内部。我认为这与此无关，但谁知道呢。此外，元素上的位置是相对的，正如我在其他帖子中看到的，关于

position:absolute

的滚动高度问题

编辑以使其更具体：

希望这会有所帮助，我尝试测量的单元格位于一个包含div中，它可以通过几种不同的方式将其显示设置为none。上面发生的事情发生在我从容器中导航（将display设置为none），然后导航回容器（将display设置为block）的一个实例中。您可以在chrome ext中以大约十几种方式完成此操作。但它只表示它们没有滚动高度（或者任何高度，我尝试使用

getBoundingClientRect（）

并为所有内容返回0），这就是我困惑的原因

---

也可能有助于了解，在导航回容器时，每次都会重建单元格，正如我前面所述，在构建单元格的函数末尾调用获取滚动高度的函数。所以每次你回到容器时，我的函数也会被调用。

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

MSDN：

莫兹：

---

scrollHeight似乎只有在某些内容足够大而需要滚动时才有效，所以我假设0表示不需要滚动（所有内容都可见）。通过查看上面的链接，您可能想要的是clientHeight。

我发现了问题所在，它和我在不同元素设置为“无”后试图检查的内容有关。出于某种原因，5-8个单元格的内容是检查其他内容，而不是我所在的页面，然后切换到当前内容。更改一些Id最终让我修复它

有问题的元素确实有一个滚动高度，如果我将溢出设置为滚动，那么它们有一个滚动条。有些没有返回scrollHeight的没有滚动高度，因为所有内容都可以很好地放入单元格，但肯定有一些内容溢出。