javascript - 如果元素在视图中，如何获取？

Question

在我的应用程序中，我想使用：

element.scrollIntoView()

为了确保元素在视口内，它可以工作。

但是，我发现它可能会导致一些问题，例如当一个元素在视口内时，然后我将它设置为“进入视图”。然后滚动条会相应地移动，这不是我所期望的。

所以，我想确保元素不在视口内，然后调用scrollIntoView.

如何获取元素是否在视口内？

Answer 1

我一直使用 jQuery 的 Viewport 插件，效果很好。

http://www.appelsiini.net/projects/viewport

使用此插件，您可以执行以下操作：

if($(".something:in-viewport").length) {
    // do something
}

Answer 2

此函数检查元素是否完全在视口中。

function isElementCompletelyInViewPort(element) {

    var elementData = element.getBoundingClientRect(),
        width = document.documentElement.clientWidth,
        height = document.documentElement.clientHeight;

    return ( 
            elementData.bottom <= height
            && elementData.right <= width
            && elementData.left >= 0
            && elementData.top >= 0);       
}

getBoundingClientRect 鲜为人知，但所有主要浏览器都支持。 https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect

欢迎任何改进建议:)