如何檢查元素是否在溢出區域？

我有一個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

如何檢查元素是否在溢出區域？

回答

相關問題