요소가 뷰포트에 표시되고 전체 뷰포트를 차지하는 지 확인하는 방법은 무엇입니까?

Question

이 해결책을 찾았습니다 : https://stackoverflow.com/a/7557433/5628

그러나 이것은 요소가 뷰포트에 표시되는지 여부를 결정하기위한 것입니다.

대신 : 내가 시도한 것은 요소가 전체 뷰포트를 차지하는 지 여부를 결정하고자하기 때문에 약간 다릅니다. 요소의 상단과 왼쪽은 현재 스크롤 또는 뷰포트 위치보다 작거나 동일하고, 요소의 높이와 폭은 같거나 뷰포트 다음 큰 경우

Answer 1

당신은 코드를 조금 조정해야하지만,이 아주 작은 jQuery를 사용하여 완벽하게 작동합니다.

$(window).resize(function() { 
    myFun.elementBiggerThanViewportCallback(); 
}); 

myFun.elementBiggerThanViewport = function (el) { 

    //special bonus for those using jQuery 
    if (el instanceof jQuery) { 
     el = el[0]; 
    } 

    var rect = el.getBoundingClientRect(); 

    return (
     rect.top <= 0 && 
     rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) 
    ); 
} 

elementBiggerThanViewportCallback = function (el) { 
    var ifBigger = tabccordion.elementBiggerThanViewport(el); 
    // Do stuff here. 
} 

Answer 2

체크하면