Posso rilevare l'area visibile dell'utente sul browser?

Question

Come puoi vedere l'immagine qui sotto, c'è "A", "B", "C", "D" ed "E" sul sito web, e l'utente può solo vedere A, B, e un po ' parti di D nel loro browser. Devono richiedere di scorrere verso il basso il browser o alcuni utenti potrebbero avere uno schermo più grande o una finestra più lunga sul loro browser che consente loro di vedere anche l'elemento C.

Ok, la mia domanda è, è possibile so cosa l'utente vede sul proprio browser usando javascript? In questo elemento, è "A", "B" e "D".

Answer 1

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

Aggiornato a lavorare con molto larghi div. Fondamentalmente controlla se i lati sinistro, superiore e destro, inferiori dei div sono entrambi nella parte visibile dello schermo, parzialmente o esternamente al viewport.

Answer 2

È possibile ottenere area visibile della finestra da,

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

quindi ottenere scorrimento documento,

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

esempio completa è qui: http://jsfiddle.net/parag1111/kSaNp/

Answer 3

In sostanza, si' D prima devo misurare il viewport ns, usando l'oggetto window, allora avresti bisogno di scorrere tutti gli elementi che vuoi controllare, e calcolare se si adattano.

Vedere questo jsfiddle per un esempio.

Ecco il codice (per amore di posteri):

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

Utilizzando quanto segue, è possibile ottenere le dimensioni del viewport del browser.

window.innerHeight; 
window.innerWidth; 

http://bit.ly/zzzVUv - Abbiamo dovuto usare Google Cache come sito non sarebbe caricare per me. Pagina originale: http://www.javascripter.net/faq/browserw.htm

Se si desidera rilevare in che misura essi hanno scorrere giù la pagina, è possibile utilizzare

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

Inoltre, ho trovato un oggetto finestra - window.screen. Sul mio sistema ha i seguenti dati:

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; 

Spero che questi rispondano sufficientemente alla vostra domanda.