如何检查元素是否在溢出区域？

我有一个300px的div。这个div包含不同的图标，如果有太多图标那么他们是不是由于overflow:hidden 可见我如何可以编程检查图标是可见的，还是在溢出区？如何检查元素是否在溢出区域？

来源

2011-09-22 user160820

http://elvingrodriguez.com/overflowed/

这是一个jQuery插件，告诉你，如果一个元素溢出。

来源

2011-09-22 15:01:53 LanguagesNamedAfterCofee

根据插件来源，在我看来，它只检查元素是否在当前视口中看到。 https://github.com/elving/Overflowed/blob/master/jquery.overflowed.js –

我找不到任何完全一样的东西，所以我写了一个快速的库函数。

Element.addMethods({ 
    isClipped: function(element, recursive){ 
     element = $(element); 
     var parent = element.up(); 
     if ((element === document.body) || !parent) return true; 
     var eLeft = element.offsetLeft, 
      eRight = eLeft+element.getWidth(), 
      eTop = element.offsetTop, 
      eBottom = eTop+element.getHeight(); 
     var pWidth = $R(parent.scrollLeft, parent.getWidth()+parent.scrollLeft), 
      pHeight = $R(parent.scrollTop, parent.getHeight()+parent.scrollTop); 
     if (!pWidth.include(eLeft) || !pWidth.include(eRight) || !pHeight.include(eTop) || !pHeight.include(eBottom)) { 
      return true; 
     } 

     if (recursive) return parent.isClipped(true); 
     return false; 
    } 
});

这不是优雅的（我没有说“快”），但它可以让你在任何元素上使用isClipped()。你可以看到一个jsfiddle测试here。它测试一个元素的任何部分（不包括边界）是否是溢出的一部分。您可以做类似的测试，以测试完全在包含客户区域之外的元素。

来源

2011-09-23 11:57:27 clockworkgeek

如果一个节点的scrollWidth /身高高于它的offsetWidth /高度，那么事情会被（部分）隐藏。然后通过简单的数学算法确定哪个区域是隐藏的（增加图标宽度，计算滚动偏移量，然后最终检查图标是否在该可见区域内）。

来源

2011-12-28 14:31:53 DanMan

如何检查元素是否在溢出区域？

回答

相关问题