2

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

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

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

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

4

1 回答 1

3

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; 

}

我试着用清晰的思路来写它。如果您愿意，可以进一步缩短它。如果您想移到一边（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>
于 2012-04-06T09:32:12.427 回答