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

由Steven

带给您

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

当元素位于视口之外时，我会在其上放置一个不同的类，以便它将向左移动，以便再次查看它。

类似的东西：

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

如果元素不在视口内，您只需将元素传递给函数并获取false。

使用。

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

修改

只是一个补充。您可以在here
中获取有关getBoundingClientRect()功能和浏览器支持的更多信息

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

1 个答案: