Javascript 我可以在浏览器上检测用户的可视区域吗？

如下图所示，网站上有“A”、“B”、“C”、“D”和“E”，用户可能只能在浏览器中看到A、B和D的一小部分。他们需要向下滚动浏览器，否则一些用户可能会有更大的屏幕，或者浏览器上有更长的窗口，这样他们甚至可以看到元素C

好的，我的问题是，这是否可以让我知道用户在使用javascript的浏览器上看到了什么？在该元素中，是“A”、“B”和“D”

---

您可以通过

var pwidth = $(window).width();
var pheight = $(window).height();

然后获取文档滚动

$(document).scroll(function(e) {
       var top = $(this).scrollTop();       
       $("h1").html("total visible area is from:"+ top +" to "+ (pheight + top) +"px");
    });

---

完整示例如下：

基本上，首先必须使用窗口对象测量视口尺寸，然后需要循环检查要检查的每个元素，并计算它们是否适合

看看这个例子

以下是代码（为了子孙后代）：

HTML:

JS:

$（函数（）{
$（窗口）.bind（'scroll.measure resize.measure'，函数（）{
//收集窗口宽度、高度和滚动位置。
var winWidth=$（窗口）.width（），
winHeight=$（窗口）.height（），
winLeft=$（窗口）.scrollLeft（），
winTop=$（窗口）.scrollTop（），
winBottom=winTop+winHeight，
winRight=winLeft+winWidth，
inView=[]；
//循环检查要检查的每个元素
$（'.inview'）。每个（函数（）{
//获取元素的位置和尺寸。
var pos=$（this）.position（），
宽度=$（this）.outerWidth（），
高度=$（this.outerHeight（）；
//设置底部和右侧尺寸。
位置底部=位置顶部+高度；
位置右=位置左+宽度；
//检查此元素是否部分位于
//窗口的可见区域。
如果((
位置左>=winLeft&&
pos.top>=winTop&&
右位置=winTop&&
位置左试试看：）

$（'input'）。单击（函数（）{
//使用“检查”类检查可见div
$（'.check'）。每个（函数（）{
var pos=$（this）.offset（），
wX=$（窗口）.scrollLeft（），wY=$（窗口）.scrollTop（），
wH=$（窗口）.height（），wW=$（窗口）.width（），
oH=$（this.outerHeight（），oW=$（this.outerWidth（）；
//检查边缘
//左、上、右、下在视口中
如果（位置左侧>=wX&&pos.top>=wY&&
oW+pos.left使用以下命令，可以获得浏览器的视口大小

window.innerHeight;
window.innerWidth;

-不得不使用谷歌缓存，因为网站不会为我加载。
原文页：

如果要检测它们在页面上向下滚动了多远，可以使用

window.scrollX;   // Horizontal scrolling
window.scrollY;   // Vertical scrolling

此外，我还发现了一个窗口对象-window.screen。在我的系统上，它包含以下数据：

window.screen.availHeight = 994;
window.screen.availLeft = 0;
window.screen.availTop = 0;
window.screen.availWidth = 1280;
window.screen.colorDepth = 32;
window.screen.height = 1280;
window.screen.pixelDepth = 32;
window.screen.width = 1280;

我希望这些能够充分回答您的问题。
您可以检查类似问题的答案。我已经创建了相同的工作示例。回答很好，当元素部分可见时，有没有办法调整此方法来计算视图中的像素数？我在这里问了一个类似的问题@tripRev不是问题，请使用水平scrol在视图的l处，减去对象的左边缘-它将显示对象在左侧隐藏了多少。从对象的全宽中减去它，并找出结果与视图宽度之间的差异。它将显示对象是完全显示还是仅显示其一部分（显然，这是视图的宽度）.对垂直方向重复相同操作。
$('input').click(function(){
   // check for visible divs with class 'check'   
    $('.check').each(function(){
        var pos = $(this).offset(),
            wX = $(window).scrollLeft(), wY = $(window).scrollTop(),
            wH = $(window).height(), wW = $(window).width(),
            oH = $(this).outerHeight(), oW = $(this).outerWidth();

        // check the edges
        // left, top and right, bottom are in the viewport
        if (pos.left >= wX && pos.top >= wY && 
            oW + pos.left <= wX + wW && oH + pos.top <= wY + wH )
            alert('Div #' + $(this).attr('id') + ' is fully visible');
        else // partially visible   
        if (((pos.left <= wX && pos.left + oW > wX) ||
             (pos.left >= wX && pos.left <= wX + wW)) &&
            ((pos.top <= wY && pos.top + oH > wY)   ||
             (pos.top  >= wY && pos.top  <= wY + wH)))
            alert('Div #' + $(this).attr('id') + ' is partially visible');
        else // not visible 
            alert('Div #' + $(this).attr('id') + ' is not visible');
    });        
});​

window.innerHeight;
window.innerWidth;

window.scrollX;   // Horizontal scrolling
window.scrollY;   // Vertical scrolling

window.screen.availHeight = 994;
window.screen.availLeft = 0;
window.screen.availTop = 0;
window.screen.availWidth = 1280;
window.screen.colorDepth = 32;
window.screen.height = 1280;
window.screen.pixelDepth = 32;
window.screen.width = 1280;