Question

是否有任何方法或JavaScript库可以查看某个元素是否真的完全可见？例如，假设您需要在某些元素之间显示一些UI按钮，而不占用页面上的更多空间，如下例所示： https://jsfiddle.net/akyh7e5f/

HTML：

<div style="width:50%; display:inline-block">
<div class="a">
<div>
Some content here.
</div>
<div class="inserter">
insertme
</div>
</div>
<div class="b">
 <div>
 some other content
 </div>
</div>
</div>

<div style="width:49%; display:inline-block">
<div class="a" style="z-index:1">
<div>
Some content here.
</div>
<div class="inserter">
insertme
</div>
</div>
<div class="b" style="z-index:2">
 <div>
 some other content
 </div>
</div>
</div>

的CSS：

.a {
  height:80%;
  background: blue;
  position:relative;
}
.b {
  padding:30px;
  background:green;
  position:relative;
}

.inserter {
  position:absolute; z-index:9999;
  left:50%; margin-left:-20px;
  background: red;
}

在一种情况下，元素在内部并且显示，在另一种情况下，它是在下面因为一些其他元素具有比insertme元素的容器更多的zindex。我可以让它成为身体＆gt; element direct child，但是每次更改元素的高度都需要更改位置。

你可以将红色元素向上移动一个dom元素，直到它在元素之后并且可见，然后对顶部/左边进行一些计算，

或，或许更高效，将其从绝对更改为相对并使其占用空间，在第二种情况下它不会显示（从设计角度来看，这不是很好）。< / p>

在这两种情况中的任何一种情况下，我都需要知道元素（这个小提琴中的红色元素）是否实际上是可见的并且可点击而上面没有元素。有没有可以找到它的库？

请不要回复jsfiddle的具体建议 - 这是一个最小的测试用例，假设许多不同的样式可能以任何方式对页面进行主题化，更不用说用户添加的样式了。另外请不要提及Selenium，因为它必须是仅限浏览器的动态应用程序。

Answer 1

可以使用elementFromPoint()来测试你想要的元素是否是偏移坐标处的顶部元素。

这不是对您的问题的完整测试，但应该有助于您的一部分

$('.inserter').each(function(){
   var offset= $(this).offset();
   var topEl = document.elementFromPoint(offset.left, offset.top);
   console.log(topEl == this)

})

注意我只检查了左上角，您可能希望看到是否显示的内容多于该角落。

的 DEMO

有没有办法看看元素是否可见，可点击？

1 个答案: