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



请看一下这把小提琴。代码是巨大的张贴。

我正试图让两个DIV粘在一个动态更新的DIV的顶部和左侧。它正在工作,但DIV内部正在发生闪烁。我该如何消除闪烁。

请帮我一下。

为修复而编写的代码:

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

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

使用.insertBefore:可以固定从下到上的闪烁

view.insertBefore(colFix, view.firstChild);

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

停止闪烁的一种方法是停止重新插入整个块,但保留一个重新填充内容的包装器。这可能仍然会导致明显的跳跃,但我把它留给你实验。


下面是之前的实验,为了其他可能尝试回答的人而保留。以上提供了"如何删除闪烁"核心问题的答案,即停止连续重新插入布局元素。

这是一把小提琴

这将#col-fixed#head-fixed更改为position: fixed;,然后在javascript中,我将appendChild的行更改为insertBefore the first child-一旦应用了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";

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

这将保持滚动条和滚动条没有闪烁,但要想实现这一点,您需要有两个div。看看这个例子。

此外,如果不重用iScroll,您可以在类似iScroll的平台上修改代码(删除不需要的功能)。

示例链接:-a链接

最新更新