如何判斷一個元素在視口中是否可見並占據整個視口？

Question

我在這里找到了這個解決方案： https : //stackoverflow.com/a/7557433/5628

但是，這僅用於確定元素在視口中是否可見。

取而代之的是：我嘗試做的是稍有不同，因為我想確定元素是否占用了整個視口。

Answer 1

檢查元素的頂部和左側是否小於或等於當前滾動或視口位置，以及元素的高度和寬度是否等於或大於然后視口

Answer 2

您需要稍微調整一下代碼，但是使用一點點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.
}