在IE和Safari中粘性绝对DIV闪烁

Question

请看看这个小提琴.代码是巨大的发布.

我试图让两个DIVS坚持到顶部并留在动态更新的DIV内.它正在工作,但在DIV内部正在发生闪烁.如何消除闪烁.

请帮帮我.

编写的代码修复:

 colFix.style.left = (holder.scrollLeft - view.offsetLeft) + "px";
 heaF.style.top = (holder.scrollTop - view.offsetTop) + "px";

Answer 1

您看到的闪烁是因为您的元素被重新插入DOM.在这种情况下,特别是在IE10中,它们会因为您的使用而.appendChild从底部闪烁到顶部,因此一旦CSS应用,它会在页面底部呈现然后闪烁到顶部.

可以使用.insertBefore以下方法修复从下到上的闪烁:

view.insertBefore(colFix, view.firstChild);

这并不能完全解决问题,因为每次重新插入时它都会继续闪烁 - 现在就在顶部.

停止闪烁的一种方法是停止重新插入整个块,但保留一个包含其内容重新填充的包装器.这可能仍会引起明显的跳跃,但我会留给您进行实验.

以下的实验,为了可能尝试回答的其他人而保留.以上提供了"如何消除闪烁"核心问题的答案 - 即停止不断重新插入布局元素.

这是一个小提琴

这改变#col-fixed并#head-fixed于position: fixed;然后在JavaScript我改变行,你appendChild方法的insertBefore的第一个孩子-这可能不会有任何相关性,一旦position: fixed被应用.

view.appendChild(heaF);

view.insertBefore(colFix, view.firstChild);

我也评论说:

colFix.style.left = colHF.style.left = (holder.scrollLeft - view.offsetLeft) + "px";
heaF.style.top = colHF.style.top = (holder.scrollTop - view.offsetTop) + "px";