-webkit-transform的替代方法：transformY？ [英] An alternative to -webkit-transform: transformY?

问题描述

我创建的Chrome扩展程序在特定网页顶部显示了iframe。

要为这个iframe保留一个地方，我使用CSS向下移动包括固定元素在内的主体：

  -webkit-transform：translateY（40px）; 
  

它似乎与许多网站工作正常，但在其他一些网站， 。

有一个替代方案，我可以尝试避免这个问题。任何帮助将不胜感激

解决方案

只需去一个节点。而且，你会猜到，它是 html 元素。不幸的是，我不知道如何访问它的方式像身体： document.body 。

发现一个简单的方法，使用 document.body.parent 。

然后在那里设置css属性。 / p>

document.body.parent.style.webkitTransform ='translateY（40像）';

除此之外， margin-top 也可以使用：

document.body.parent.style.marginTop ='40px';

I'm creating a chrome extension that displays an iframe on the top of specific pages. This iframe is fixed and placed before opening body tag.

To reserve a place for this iframe, I shift down the body including fixed element using CSS :

-webkit-transform: translateY(40px);

It seems to work fine with many websites, but on some other website such as facebook it causes a problem. a scroll bar is shown on the right side.

Is there an alternative that I might try to avoid this problem . Any help would be appreciated

解决方案

Just go one Node higher. And, you'll guess it, it's the html element. Unfortunately, I don't know a way to access it like the body: document.body.

But I found an easy way, use document.body.parent.

And there, you set the css property.

document.body.parent.style.webkitTransform = 'translateY(40px)';

Just besides, margin-top works too:

document.body.parent.style.marginTop = '40px';

这篇关于-webkit-transform的替代方法：transformY？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！