javascript - 如何检测特定 div 何时不在 View 中

Question

我刚刚在 vk.com 上看到了一些非常有趣的东西

基本上，在个人资料页面中，当左列从 View 中消失时，右列会更改其宽度。

示例:http://vk.com/durov

只需向下滚动一点即可看到它。

Answer 1

DOM 中的每个元素都定义了可以从 JavaScript 访问的某些空间偏移属性，它们是 offsetTop、offsetLeft 等，它们为您提供了它与其父元素的偏移量值。您还可以使用 while 循环访问有问题的父级，该循环简单地分配下一个父级，直到没有剩余(您可以将它们的偏移量添加到原始偏移量的变量中以获得“真实”(x，y)偏移量)和当没有更多的父元素时，就会存在 while 循环。

然后，您执行一些简单的逻辑来检查它是否位于视口(viewport)内(提示 - 使用窗口对象的页面偏移量和宽度/高度属性)。这足以继续吗？或者您需要代码示例吗？

如果您知道元素将出现的确切位置及其高度(宽度在这里实际上并不重要)，您可以进行一些修改，但这是一种蛮力方法。只需对照您尝试在屏幕外显示的元素的预定“maxY”检查页面 Y 偏移量和高度，即可在右侧显示某个 div(如给出的示例中所示)。

附录:(更切中要点)

这会检查元素的任何部分在视口(viewport)中是否可见:

function isVisibleInViewport(elem)
{
    var y = elem.offsetTop;
    var height = elem.offsetHeight;

    while ( elem = elem.offsetParent )
        y += elem.offsetTop;

    var maxHeight = y + height;
    var isVisible = ( y < ( window.pageYOffset + window.innerHeight ) ) && ( maxHeight >= window.pageYOffset );
    return isVisible; 

}

我试着清晰地写下它。如果您愿意，您可以进一步缩短它。如果您希望移动到一侧(x 轴，offsetLeft 变量)，甚至可以将其扩展为包含逻辑。如果您想检查它是否完全在 View 之内(尽管看不到原因)，那么对逻辑的更改应该是最小的。

我的示例用法

控制何时调用此函数的逻辑超出了本文的范围，我希望您能想到一些方法。我的例子:

function check()
{
    var canvas = document.getElementById("webGlExperiments");
    if(isVisibleInViewport(canvas))
        document.getElementById("test").innerHTML = "It is!";
    else
        document.getElementById("test").innerHTML = "It is not!";
}

然后添加一个事件监听器来检查滚动:

window.addEventListener("scroll", check, false);

对于我的示例，您还需要另一个元素，例如 ID 为 webGlExperiments 的 Canvas ，将其更改为适合您和您的问题的元素。这是我在测试中使用的有问题的 div，您可以自行调整:

<div id="test" style="margin-top:100px;">Testing, testing!</div>