我有一个transform:translate元素指示一个overflow:hidden元素:
<div style="overflow: hidden; height: 200px; width: 200px;">
<div class="hidden-element" style="transform: translate(300px, 300px)">Hidden</div>
</div>
而且我有一个hidden-element:hover {transform:translate(0px,0px); 在内部元素中的规则。
当我执行浏览器搜索“隐藏”(Ctrl + F)时,该元素将移动到其原始位置!
为什么会发生?怎么预防呢?为什么浏览器搜索会首先更改我的布局?
注意我没有:focus CSS规则。只是悬停。这是在Chrome,Opera和IE中发生的。不在Firefox中。
谢谢。
这不是元素变得可见的情况,而是包含div滚动以显示新选择的内容的情况(由于内容不在包含div的范围之内,因此之前才可见)。您可以在此小提琴中更清楚地看到行为:http : //jsfiddle.net/fJ52f/1/(下面的CSS)
#outer{
overflow: hidden;
height: 200px;
width: 200px;
background:#FF0000;
}
#inner{
transform: translateY(300px);
-moz-transform: translateY(300px);
-webkit-transform: translateY(300px);
}
我不知道一种防止HTML的焦点滚动行为的方法,只是无法在JavaScript中检测滚动事件并将其强制返回。但是您总是可以只使用visibility:hidden
隐藏元素,而不是依靠隐藏的溢出内容。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句