获取视口内元素的像素数答案

【问题标题】：Get the number of an element's pixels which are inside the viewport获取视口内元素的像素数
【发布时间】：2015-04-25 11:30:42
【问题描述】：

我正在尝试获取在视口内可见的给定 html 元素的像素总数。这个问题和接受的答案Can I detect the user viewable area on the browser? 对于确定元素是否在视图中/不在视图中/部分在视图中非常有用，但是对于部分在视图中的情况，我需要获取总（垂直 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;

非常感谢任何帮助！

【问题讨论】：

“我正在尝试这样的事情，但水平值总是错误的” - 请定义“错误”，应该发生什么以及实际发生了什么？您试图找出问题所在？
@StephanMuller 很抱歉这个不清楚的问题。返回的 nElemTotalPxInView 永远不是视图中元素像素的正确数量，因为计算 nHpxInView 或 nVpxInView 的数学计算不正确。我从未完全确定原因，但我的朋友找到了一种更简单的方法，我将在第二天左右发布。

标签： javascript html dom position viewport

【解决方案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;
},

【讨论】：