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

Question

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

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

Answer 1

你可以通过，获取窗口的可见区域，

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");
    });

完整示例在这里：http://jsfiddle.net/parag1111/kSaNp/

Answer 2

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

请参阅此jsfiddle 以获取示例。

这是代码（为后代着想）：

HTML：

<div id="info">
    <p class="wxh"></p>
    <p class="txl"></p>
    <p class="report"></p>
</div>

<h1>A big list!</h1>
<ul></ul>

CSS：

#info{
    position: fixed;
    right: 0px;
    text-align: center;
    background: white;
    border: 2px solid black;
    padding: 10px;
}

JS：

    $(function(){

    $(window).bind('scroll.measure resize.measure',function(){

        // Gather together the window width, height, and scroll position.
        var winWidth = $(window).width(),
            winHeight = $(window).height(),
            winLeft = $(window).scrollLeft(),
            winTop = $(window).scrollTop(),
            winBottom = winTop + winHeight,
            winRight = winLeft + winWidth,
            inView = [];

        // Loop over each of the elements you want to check
        $('.inview').each(function(){

            // Get the elements position and dimentions.
            var pos = $(this).position(),
                width = $(this).outerWidth(),
                height = $(this).outerHeight();

            // Set bottom and right dimentions.
            pos.bottom = pos.top + height;
            pos.right = pos.left + width;

            // Check whether this element is partially within
            // the window's visible area.
            if((
                pos.left >= winLeft &&
                pos.top >= winTop &&
                pos.right <= winRight &&
                pos.bottom <= winBottom
            ) || (
                pos.left >= winLeft && pos.top >= winTop && 
                pos.left <= winRight && pos.top <= winBottom
            ) || (
                pos.right <= winRight && pos.bottom <= winBottom &&
                pos.right >= winLeft && pos.bottom >= winTop
            )){
                // Change this to push the actual element if you need it.
                inView.push( $(this).text() );
            }
        });

        // For the purposes of this example, we only need the
        // first and last element, but in your application you may need all.
        var first = inView.shift(),
            last = inView.pop();

        // Show the details in the info box.
        $('#info .wxh').text( winWidth+' x '+winHeight );
        $('#info .txl').text( winTop+' x '+winLeft );
        $('#info .report').text( 'Showing from '+first+' to '+last );
    });

    // The rest is just setup stuff, to make the area scrollable.
    for( var i=0; i<100; i++ ){
        $('ul').append('<li class="inview">List item '+i+'</li>');
    }

    $(window).trigger('resize.measure');
})    ​

Answer 3

试试看 :) 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 的左、上、右、下边缘是否都在屏幕的可见部分，部分或在视口之外。

Answer 4

使用以下，可以得到浏览器的视口大小。

window.innerHeight;
window.innerWidth;

http://bit.ly/zzzVUv - 必须使用 Google 缓存，因为网站无法为我加载。 原始页面： 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;

我希望这些足以回答您的问题。