如何检测某个 div 何时不在视野中

Question

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

基本上在配置文件页面中，当左列消失在视图中时，右列正在更改其宽度。

例 ： http://vk.com/durov

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

Answer 1

DOM 中的每个元素都定义了某些可以从 JavaScript 访问的空间偏移量属性，它们是 offsetTop、offsetLeft 等，它们为您提供了它与父元素的偏移量。您还可以使用 while 循环访问有问题的父项，该循环只是分配下一个父项，直到没有留下任何项（您可以将它们的偏移量添加到原始偏移量的变量以获得"true"（x，y） 偏移量），并且当没有更多的父元素时，while 循环存在。

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

如果您知道元素的确切位置及其高度（宽度在这里实际上无关紧要），您可以进行一些黑客攻击，但这是一种蛮力方法。只需根据您尝试离开屏幕的元素的预定"maxY"检查页面 Y 偏移量和高度，即可在右侧显示某个div（如给出的示例所示）。

附录：（更切中要害）

这将检查元素的任何部分在视口中是否可见：

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变量），甚至可以将其扩展为包含逻辑。如果您想检查它是否完全在视野范围内，对逻辑的更改应该是最小的（虽然看不到原因）。

我的示例用法

管理何时调用此函数的逻辑超出了此范围，我希望您有一些方法。我的例子：

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的画布，把它改成适合你和你的问题的东西。这是我在测试中使用的有问题的div，您可以自己适应：

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