检查元素是否垂直在用户视线中

时间:2013-08-11 14:13:16

标签: javascript function

我正在寻找一个能从DOM获取元素的函数,并确定它是否垂直于用户的视线?

1 个答案:

答案 0 :(得分:1)

我搜索了一个获取元素的函数,并检查它是否在用户正在查看的当前滚动高度中。我最终尝试了一堆功能,这些功能并没有完全按照我的需要进行,而且我已经构建了自己的功能。由于我没有找到这样的功能,我现在正在与你们分享,以防将来有人需要它! :P这不使用任何框架或插件。

function visible(a, t){
    // a => element
    // t => tolerance, how much pixels can be hidden and still return true
    var w_top = window.pageYOffset || document.documentElement.scrollTop,
        w_hgh = window.outerHeight,
        a_top = 0,
        a_hgh = a.offsetHeight;

    while(a.tagName.toLowerCase() !== 'body') {
        a_top += a.offsetTop;
        a = a.offsetParent;
    }

    var b = (w_top + w_hgh) - (a_top + a_hgh);

    if(b > (0 - t) && b < (w_hgh - a_hgh + t)){
        return true;
    }
    return false;
}

使用中的一个例子:

var element = document.getElementById('id');
if(!visible(element, 50)){
    element.focus();
}