javascript - 如何检测 DOM 元素是否部分超出视口(viewport)

Question

我想知道是否有人对此有简单的解决方案。我正在尝试检测 HTML 元素的任何部分是否在视口(viewport)之外。我试过使用以下代码:

$.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();

由 Steven 提供给您

只有当整个元素不再可见时，我才能让它工作，但我只需要知道元素的一部分是否在视口(viewport)之外。

当元素在视口(viewport)之外时，我会在其上放置一个不同的类，这样它就会向左移动，以便再次可见。

类似于:

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

如果元素不在视口(viewport)内，您只需将元素传递给函数并得到 false。

用法。

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

编辑

补充一下。您可以在 here 中获得有关 getBoundingClientRect() 函数和浏览器支持的更多信息。