检查元素的scrollHeight有时返回0 [英] checking for scrollHeight of an element sometimes returning 0

问题描述

因此，我正在检查某些动态生成的内容的scrollHeight，以确定是否在内容中包含更多按钮。用户可以点击更多按钮来展开内容并查看内容。然而，每次有时使用相同的函数，它说元素的scrollHeight是0，不用说这些元素的函数会中断。我无法理解为什么这个函数可以在90％的时间内工作，但有时候说元素在显式时没有scrollHeight（他们占用页面上的空间）。
$

 函数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，div的高度）
 if（current_span.scrollHeight> 128&& amp; current_div.scrollHeight< 170）{
 console.log （对话屏幕检查内部）; 
 current_div.innerHTML + =< a href = \＃\id ='expand_colapse_button+ i +'class = \expand_colapse_button_conversation \style = \color：blue; \\ \\onclick ='expand_colapse（\+ i +\）'>更多...< / 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 +\\ \\ ）'>更多...< / 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 +\）'>更多。 ..< / A>中; 
 
 
 
 
 code 
 
 
 
你可以看到我正在检查span和div上的scrollHeight，因为我有一些正在生成的不同类型的单元格，我必须根据单元格类型将更多按钮放置在不同的地方。这个函数只在生成被检查内容的函数的末尾被调用，并且我试图通过 setTimeout（）调用它，因为它正在经历的极小的机会这个函数在它们被完全创建之前（我不知道会如何发生，但是谁知道）。  
 
 
这一切都发生在一个铬合金分机的内部。我不认为这与它有什么关系，但是谁知道。此外，元素上的位置是相对的，因为我已经看到其他人发布有关scrollHeight问题的消息，其中 position：absolute 。
 
 
 
编辑更具体：
 
 
希望这可以帮助，我试图测量的单元格是在一个包含div的显示设置为几种不同的方式。上述情况发生在我从容器中导航（将显示设置为none）并导航回它（将显示设置为阻止）的实例之一中。你可以在chrome ext中以十几种方式做到这一点。但它只是说他们没有一个scrollHeight（或者我曾尝试使用 getBoundingClientRect（）的任何高度，并且它对于一件事情返回0），这就是为什么我很困惑。 
 
 
另外可能有用的知道，在导航回到容器时，单元格每次都重建，正如我上面所说的，我的函数获得scrollHeight在函数结尾处称为构建单元。所以每次你回到容器时，我的函数也会被调用。
解决方案
我找到了问题，在不同的元素被设置为不显示任何东西之后我试图检查的内容。出于5-8个单元的某些原因，它正在检查其他内容而不是我正在浏览的页面，然后切换到当前内容。改变一些ID最终让我修复它。  
So I am checking the the scrollHeight of some dynamically generated content to determine whether or not to include a more button in the content. The user can click the more button to expand the content and see everything inside. However using the same function every time sometimes it says the scrollHeight of the elements is 0 which needless to say breaks the function for those elements. I am beyond boggled as to why this function would work 90% of the time but sometimes say the elements don't have a scrollHeight when they clearly do (they take up space on the page).

Here is the function:
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>";
            }
        }
    }
}
As you can see I am checking the scrollHeight on the span and on the div because I have a couple of different types of cells that are being generated and I have to place the more button in different places depending on the type of cell.  This function only gets called at the end of the function that generates the content being checked and I have tried it with a setTimeout() call on the miniscule chance that it was going through this function before they were fully created (I don't know how that would happen but who knows). 

P.S. This is all taking place inside of a chrome ext. I don't think that has anything to do with it but who knows. Also the position on the elements is relative as I have seen others post about scrollHeight issues with position: absolute.

Edit to make more specific:

Hopefully this helps, the cells I am trying to measure are in a containing div that gets its display set to none several different ways. What is happening above happens in one of the instances where I have navigated away (set display to none) from the container and then navigated back to it (set display to block). You can do this in about a dozen ways inside of the chrome ext. but it only says they don't have a scrollHeight (or any height for that matter I tried using getBoundingClientRect() and it returned 0 for everything) for one case which is why I am confused.

Also might be useful to know, on navigation back to the container the cells are rebuilt every time and as I stated above my function to get the scrollHeight is called at the end of the function to build the cells. So everytime you get back to the container my function is also called.
解决方案
I figured out the problem, It had to do with the what I was trying to check after different elements were set to display none. For some reason for 5-8 cells it was checking other content instead of the page I was on and then switching to the current content. Changing some Id's ultimately let me fix it. 

                        
这篇关于检查元素的scrollHeight有时返回0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！