如何判断某个元素在视口中是否可见并占用整个视口

How to tell if an element is visible in the viewport AND takes up the entire viewport?

本文关键字：视口 是否 何判断 判断 元素      更新时间：2023-09-26

我在这里找到了这个解决方案：https://stackoverflow.com/a/7557433/5628

但是，这仅用于确定元素在视口中是否可见。

相反：我尝试做的略有不同，因为我想确定元素是否占据整个视口。

检查元素顶部和左侧是否小于或等于当前滚动或视口位置，如果元素高度和宽度等于或大于视口

您需要稍微调整一下代码，但使用一点点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.
}
相关文章：