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

Question

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

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

原文由 DNB5brims 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试一试 :) http://jsfiddle.net/Aj2fU/5/

 $('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');
    });
});​

已更新 以使用非常宽的 div。基本上它会检查 div 的左、上、右、下边缘是否都在屏幕的可见部分、部分或视口之外。

原文由 Cheery 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用以下内容，您可以获得浏览器的视口大小。

 window.innerHeight;
window.innerWidth;

参考：http: //www.javascripter.net/faq/browserw.htm

如果你想检测他们向下滚动页面的距离，你可以使用

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;

原文由 Shane 发布，翻译遵循 CC BY-SA 4.0 许可协议