Question

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

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

向下滚动一下即可看到它。

Answer 1

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

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

如果你知道你的元素出现在哪里及其高度（宽度在这里没有任何影响），你可以做一些黑客攻击，但这是一种蛮力的方法。只需检查页面Y偏移和高度与您尝试离开的元素的预定“maxY”，以显示右侧的某个div（如给出的示例中所示）。

ADDENDUM :(更重要的是）

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

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>

如何检测某个div何时不在视野范围内

1 个答案: