요소가 오버플로 영역에 있는지 어떻게 확인할 수 있습니까?

Question

나는 300px의 with와 div가 있습니다. 이 DIV에는 다른 아이콘이 포함되어 있으며 너무 많은 아이콘이있는 경우 overflow:hidden 으로 인해 보이지 않습니다. 아이콘이 표시되어 있는지 또는 넘침 영역에 있는지 프로그램 방식으로 확인하려면 어떻게합니까?

Answer 1

http://elvingrodriguez.com/overflowed/

이 요소가 오버 플로우되는 경우를 알려주는 jQuery 플러그인입니다.

Answer 2

정확히 라이브러리와 같은 것을 찾을 수 없어서 빠른 라이브러리 기능을 작성했습니다.

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; 
    } 
}); 

그것은 (I는 "빠른"말 했는가) 우아한 아니지만 그것은 당신이 모든 요소에 isClipped()를 사용할 수 있습니다. jsfiddle 테스트 here을 볼 수 있습니다. 요소 (테두리 제외)의 일부가 오버플로의 일부인지 여부를 테스트합니다. 포함하는 클라이언트 영역 외부의 요소를 테스트하는 것과 비슷한 작업을 수행 할 수 있습니다.

Answer 3

노드의 scrollWidth/Height가 offsetWidth/Height보다 높으면 무언가 (부분적으로) 숨겨집니다. 그런 다음 간단한 수학을 통해 숨겨진 영역을 결정해야합니다 (아이콘 너비를 더하고 스크롤 오프셋을 계산 한 다음 궁극적으로 아이콘이 해당 보이는 영역 내에 있는지 확인).