0

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

我试图让两个 DIVS 粘在顶部并留在动态更新的 DIV 中。它正在工作，但在 DIV 内部发生了闪烁。我怎样才能消除闪烁。

请帮助我。

为修复而编写的代码： 

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

2 回答 2

7

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

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

view.insertBefore(colFix, view.firstChild);

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

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

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

这是一个小提琴

这发生了变化#col-fixed，然后在 javascript 中，我将您 appendChild 的行更改为 insertBefore 第一个孩子 - 一旦应用，这可能没有任何相关性。#head-fixedposition: fixed;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";
于 2013-09-03T16:40:17.527 回答
1

您可以尝试使用iScroll 插件。链接。

这将保持滚动条，并且滚动条也不会闪烁，但是要使其正常工作，您需要有两个 div。看看这个例子。

此外，如果不重用 iScroll，您可以修改类似于 iScroll 的代码（删除不需要的功能）。

示例链接：-一个链接

于 2013-10-05T08:17:43.540 回答