Javascript 如何检测某些div何时不在视野内

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

基本上，在配置文件页面中，当左栏离开视图时，右栏的宽度会发生变化

例如：

---

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

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

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

如果您知道元素的确切位置及其高度（此处宽度实际上无关紧要），您可以进行一些修改，但这是一种蛮力方法。只需将页面Y偏移量和高度与您试图脱离屏幕的元素的预定“maxY”进行核对，即可向右显示某个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; 

}

然后添加事件侦听器以检查滚动：

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

在我的例子中，您还需要另一个元素，比如id为WebGleExperiments的canvas，将其更改为适合您和您的问题的元素。这是我在测试中使用的有问题的div，您可以自行调整：

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

测试，测试！

检查这个答案，你想要的是一个稍微不同的答案that@EvenJohnson给我一点时间想象一下。好了，我已经把它应用到我的一些实验中了。希望有帮助！它只是将内部HTML转换为。。。好吧，你明白了。出于测试目的，您可以强制车身

最小高度

达到2000px；我没有得到它，我的意思是我制作了一个简单的html页面，但什么也没发生。为什么要使用onClick（）呢？假设这是一个左边的列，它从来没有点击过右边？我怎么能点击一个不在viewportIt中的div呢？这只是一个简单的例子，你想要使用的是一个事件监听器，它会在你开始滚动时修改你的div，它包含一些内部HTML或文本。您可能有一个函数，它在左侧添加一个div，让您可以返回（如示例所示）<代码>窗口。addEventListener（“滚动”，检查，错误）它有三个参数，前两个很重要，事件类型-scroll和您希望使用的函数。修改它以适应您的问题。只需将它添加到脚本中，它就会在每个滚动条上调用check。

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