我可以在浏览器上检测用户可查看区域吗？

Question

正如您可以看到下面的图片,网站上有"A","B","C","D"和"E",用户可能只能看到A,B和一小部分D在他们的浏览器中.他们需要向下滚动浏览器,或者某些用户可能拥有更大的屏幕,或浏览器上更长的窗口,这样他们甚至可以看到元素C.

好的,我的问题是,这可以让我知道用户在浏览器上使用javascript看到了什么吗？在这个元素中,是"A","B"和"D".

Answer 1

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

window.innerHeight;
window.innerWidth;

http://bit.ly/zzzVUv - 不得不使用谷歌缓存作为网站不会加载我.原始页面: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;

我希望这些能够充分回答你的问题.

Answer 2

试试吧:) 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 3

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

\n\n

请参阅此jsfiddle的示例。

\n\n

这是代码（为了后代）：

\n\n

HTML：

\n\n

<div id="info">\n    <p class="wxh"></p>\n    <p class="txl"></p>\n    <p class="report"></p>\n</div>\n\n<h1>A big list!</h1>\n<ul></ul>\n

\n\n

CSS：

\n\n

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

\n\n

JS：

\n\n

    $(function(){\n\n    $(window).bind(\'scroll.measure resize.measure\',function(){\n\n        // Gather together the window width, height, and scroll position.\n        var winWidth = $(window).width(),\n            winHeight = $(window).height(),\n            winLeft = $(window).scrollLeft(),\n            winTop = $(window).scrollTop(),\n            winBottom = winTop + winHeight,\n            winRight = winLeft + winWidth,\n            inView = [];\n\n        // Loop over each of the elements you want to check\n        $(\'.inview\').each(function(){\n\n            // Get the elements position and dimentions.\n            var pos = $(this).position(),\n                width = $(this).outerWidth(),\n                height = $(this).outerHeight();\n\n            // Set bottom and right dimentions.\n            pos.bottom = pos.top + height;\n            pos.right = pos.left + width;\n\n            // Check whether this element is partially within\n            // the window\'s visible area.\n            if((\n                pos.left >= winLeft &&\n                pos.top >= winTop &&\n                pos.right <= winRight &&\n                pos.bottom <= winBottom\n            ) || (\n                pos.left >= winLeft && pos.top >= winTop && \n                pos.left <= winRight && pos.top <= winBottom\n            ) || (\n                pos.right <= winRight && pos.bottom <= winBottom &&\n                pos.right >= winLeft && pos.bottom >= winTop\n            )){\n                // Change this to push the actual element if you need it.\n                inView.push( $(this).text() );\n            }\n        });\n\n        // For the purposes of this example, we only need the\n        // first and last element, but in your application you may need all.\n        var first = inView.shift(),\n            last = inView.pop();\n\n        // Show the details in the info box.\n        $(\'#info .wxh\').text( winWidth+\' x \'+winHeight );\n        $(\'#info .txl\').text( winTop+\' x \'+winLeft );\n        $(\'#info .report\').text( \'Showing from \'+first+\' to \'+last );\n    });\n\n    // The rest is just setup stuff, to make the area scrollable.\n    for( var i=0; i<100; i++ ){\n        $(\'ul\').append(\'<li class="inview">List item \'+i+\'</li>\');\n    }\n\n    $(window).trigger(\'resize.measure\');\n})    \xe2\x80\x8b\n

\n