如何检测DOM元素是否部分位于视口之外

Question

我想知道是否有人有一个简单的解决方案.我正在尝试检测HTML元素的任何部分是否发现自己在视口之外.我尝试过使用以下代码:

$.fn.isOnScreen = function(){

    var win = $(window);

    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

史蒂文带给你的

当整个元素不再可见时,我只能让它工作,但我只需要知道元素的一部分是否在视口之外.

当元素在视口之外时,我会在其上放置一个不同的类,这样它就会向左移动,以便再次查看它.

就像是:

if(elementIsPartiallyOutsideViewport) {
    ele.addClass('move-left');
}

有任何想法吗？

Answer 1

大多数浏览器已经支持getBoundingClientRect()方法.所以你可以尝试以下代码.

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&     
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

您只需将元素传递给函数,并获取falseif元素不在视口内.

用法.

if (!isElementInViewport(el)) {
    el.addClass('move-left');
}

编辑

只是一个补充.您可以getBoundingClientRect()在此处获得有关功能和浏览器支持的更多信息