获取元素在视口内的像素数

Question

我正在尝试获取给定 html 元素在视口内可见的像素总数。这个问题和接受的答案 Can I detect the user viewable area on the browser? 对于确定元素是否在 view/partially 的 view/out 视图中非常有用，但对于部分视图的情况，我需要获得总（垂直 x水平）未被视口遮挡的像素数。我正在尝试这样的事情，但水平值总是错误的：

var $element            = $(element),
pos                     = $element.offset(),
elemLeft                = pos.left,
elemTop                 = pos.top,
elemHeight              = $element.outerHeight(), 
elemWidth               = $element.outerWidth(),
winLeft                 = $(top).scrollLeft(), 
winTop                  = $(top).scrollTop(),
winHeight               = $(top).height(), 
winWidth                = $(top).width(),
nElemTotalPx            = elemWidth*elemHeight,
nElemTotalPxInView,
nVpxInView              = elemHeight,
nHpxInView              = elemWidth;

//obscured by bottom of window
if(winTop > elemTop){
    nVpxInView = (elemTop+elemHeight)-winTop;
//obscured by top of window
}else if(winHeight-winTop > elemTop){
    nVpxInView = (winTop+winHeight)-elemTop;
};

//obscured by left of window
if(winLeft > elemLeft){
    nHpxInView = (elemLeft+elemWidth)-winLeft;
//obscured by right of window
}else if(winWidth-winLeft < elemLeft+elemWidth){
    nHpxInView = elemWidth-( elemWidth-(winWidth-winLeft) );
};

nElemTotalPxInView = nVpxInView*nHpxInView;
return nElemTotalPxInView;

非常感谢任何帮助！

Answer 1

我的朋友找到了另一种解决问题的方法。为视口和元素分别设置 6 个值意味着我们始终可以使用一个等式计算视图中像素的百分比：

_getPercentInView = function(element){
    $element = $(element);

    var pos                     = $element.offset(),
        theViewport             = {top:null, left:null, bottom:null, right:null, width:null, height:null},
        theElement              = {top:null, left:null, bottom:null, right:null, width:null, height:null},
        elemLeft                = pos.left,
        elemTop                 = pos.top,
        elemHeight              = $element.height(),
        elemWidth               = $element.width();

    theViewport.width       = $(window).width();
    theViewport.height      = $(window).height();
    theViewport.top         = $(window).scrollTop();
    theViewport.left        = $(window).scrollLeft();
    theViewport.bottom      = theViewport.top+theViewport.height;
    theViewport.right       = theViewport.left+theViewport.width;

    theElement.top          = elemTop - theViewport.top;
    theElement.left         = elemLeft - theViewport.left;
    theElement.width        = elemWidth;
    theElement.height       = elemHeight;
    theElement.bottom       = theElement.top+theElement.height;
    theElement.right        = theElement.left+theElement.width;

    var nPercentInView = Math.round(100 * ((theElement.height-(Math.max(0,0-theElement.top) + Math.max(0,theElement.bottom-theViewport.height))) / theElement.height) * ((theElement.width-(Math.max(0,0-theElement.left) + Math.max(0,theElement.right-theViewport.width))) / theElement.width)   );
    return nPercentInView;
},

获取元素在视口内的像素数

Get the number of an element's pixels which are inside the viewport

html

javascript

dom

position

viewport