Итак, я проверяю 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>";
}
}
}
}
Как вы можете видеть, я проверяю scrollHeight на span и div, потому что у меня генерируется несколько разных типов ячеек, и я должен разместить кнопку more в разных местах в зависимости от типа ячейки. , Эта функция вызывается только в конце функции, которая генерирует проверяемое содержимое, и я попробовал ее с помощью вызова setTimeout(), чтобы минимизировать вероятность того, что она прошла через эту функцию до того, как они были полностью созданы (я не знаю, как это будет, но кто знает).
P.S. Все это происходит внутри Chrome Ext. Я не думаю, что это как-то связано с этим, но кто знает. Кроме того, положение элементов относительно, поскольку я видел пост других о проблемах scrollHeight с position: absolute.
Изменить, чтобы сделать более конкретным:
Надеюсь, это поможет, ячейки, которые я пытаюсь измерить, находятся в содержащем элементе div, в котором для отображения не задано несколько различных способов. То, что происходит выше, происходит в одном из случаев, когда я отошел (установил отображение на none) от контейнера, а затем вернулся к нему (установил отображение на блокировку). Вы можете сделать это примерно дюжиной способов внутри Chrome Ext. но он только говорит, что у них нет scrollHeight (или какой-либо высоты по этому вопросу, я пытался использовать getBoundingClientRect(), и он вернул 0 для всего) для одного случая, поэтому я запутался.
Также может быть полезно знать, что при переходе обратно к контейнеру ячейки перестраиваются каждый раз, и, как я уже говорил выше, моя функция для получения scrollHeight вызывается в конце функции для построения ячеек. Поэтому каждый раз, когда вы возвращаетесь в контейнер, моя функция также вызывается.