Question

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

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

enter image description here

Answer 1

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

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;

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

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

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

有关示例，请参阅此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 4

您可以通过

获取窗口的可见区域

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/

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

4 个答案: