请看看这个fiddle 。代码量很大,无法发布。
我试图让两个 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);
这并不能完全解决问题,因为每次重新插入时它都会继续闪烁 - 现在就在顶部。
停止闪烁的一种方法是停止重新插入整个 block ,但保留一个包装器以重新填充其内容。这仍然可能会导致明显的跳跃,但我将其留给您进行实验。
<小时/>下面之前的实验,是为了其他可能尝试回答的人而保留的。以上回答了“如何消除闪烁”的核心问题——即停止不断地重新插入布局元素。
这将#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";
关于javascript - 粘性绝对 DIV 在 IE 和 Safari 中闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18556207/