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

Question

请看看这个fiddle 。代码量很大，无法发布。

我试图让两个 DIV 粘在动态更新的 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);

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

停止闪烁的一种方法是停止重新插入整个 block ，但保留一个包装器以重新填充其内容。这仍然可能会导致明显的跳跃，但我将其留给您进行实验。

<小时/>

下面之前的实验，是为了其他可能尝试回答的人而保留的。以上回答了“如何消除闪烁”的核心问题——即停止不断地重新插入布局元素。

Here is a fiddle

这将#col-fixed和#head-fixed更改为position:fixed;，然后在javascript中我更改了您所在的行addChild 到 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";