48

As you can see the image below, there is "A", "B", "C", "D" and "E" on the website, and the user may only can see the A, B, and a little parts of D in their browser. They need to require to scroll down the browser or some users may have a bigger screen, or a longer window on their browser that allow they can even see the element C.

Ok, my question is, is this possible to let me know what the user seeing on their browser using javascript? In this element, is "A", "B" and "D".

enter image description here

DNB5brims
  • 29,344
  • 50
  • 131
  • 195
  • You can check [http://stackoverflow.com/questions/704758/how-to-check-if-an-element-is-really-visible-with-javascript](http://stackoverflow.com/questions/704758/how-to-check-if-an-element-is-really-visible-with-javascript) for answers to a similar question. – Bill Feb 14 '12 at 04:55

4 Answers4

26

Using the following, you can get the browser's viewport size.

window.innerHeight;
window.innerWidth;

Refer to: http://www.javascripter.net/faq/browserw.htm

If you want to detect how far they have scrolled down the page, you can use

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

Also, I have found a window object - window.screen. On my system it has the following data:

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;
General Grievance
  • 4,555
  • 31
  • 31
  • 45
Shane
  • 2,007
  • 18
  • 33
14

Try it :) 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');
    });        
});​

Updated to work with very wide divs. Basically it checks whether the left, top and right, bottom edges of the divs are both in the visible part of the screen, partially or outside of the viewport.

Cheery
  • 16,063
  • 42
  • 57
  • 1
    Great answer, is there a way to adapt this to calculate the number of pixels in view, when an element is partially in view? I asked a similar question here http://stackoverflow.com/questions/28685693/get-the-number-of-an-elements-pixels-which-are-inside-the-viewport – tripRev Feb 23 '15 at 23:51
  • 1
    @tripRev not a problem, take a horizontal scroll of the view, subtract the left edge of the object - it will tell how much of the object is hidden at the left. Subtract it from the full width of the object and find the difference between the result and the width of the view. It will tell whether the object is completely shown or just a part of it (which is, obviously, the width of the view). Repeat the same for vertical direction. – Cheery Feb 24 '15 at 23:10
5

Basically, you'd first have to measure the viewport dimentions, by using the window object, then you'd need to loop through each of the elements that you want to check, and calculate wether they fit.

See this jsfiddle for an example.

Here's the code (for posterity's sake):

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');
})    ​
Sam Sehnert
  • 2,933
  • 1
  • 20
  • 25
3

You can get window's visible area by,

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

Then get document scroll,

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

Full example is here : http://jsfiddle.net/parag1111/kSaNp/

Parag Gajjar
  • 700
  • 1
  • 11
  • 25