Tôi có thể phát hiện khu vực có thể xem của người dùng trên trình duyệt không?

Question

Như bạn có thể thấy hình ảnh bên dưới, có "A", "B", "C", "D" và "E" trên trang web và người dùng chỉ có thể thấy A, B và một chút các phần của D trong trình duyệt của họ. Họ cần phải cuộn xuống trình duyệt hoặc một số người dùng có thể có màn hình lớn hơn hoặc cửa sổ dài hơn trên trình duyệt của họ cho phép họ thậm chí có thể thấy phần tử C.

Ok, câu hỏi của tôi là, có thể cho phép cho tôi biết người dùng nhìn thấy gì trên trình duyệt của họ bằng javascript? Trong phần tử này, là "A", "B" và "D".

Answer 1

Hãy thử nó :) 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'); 
    });   
});​ 

Cập nhật để làm việc với số lượng rất lớn. Về cơ bản nó kiểm tra xem bên trái, trên và bên phải, cạnh dưới của các div đều nằm trong phần hiển thị của màn hình, một phần hay bên ngoài khung nhìn.

Answer 2

Bạn có thể nhận vùng hiển thị cửa sổ bằng cách,

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

Sau đó lấy cuộn tài liệu,

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

Full ví dụ là ở đây: http://jsfiddle.net/parag1111/kSaNp/

Answer 3

Về cơ bản, bạn' d trước tiên phải đo lường chế độ xem dimentio ns, bằng cách sử dụng đối tượng cửa sổ, sau đó bạn cần phải lặp qua từng phần tử mà bạn muốn kiểm tra và tính toán thời gian phù hợp.

Xem ví dụ này jsfiddle để biết ví dụ.

Dưới đây là đoạn code (vì hậu thế của):

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

Sử dụng các mục sau, bạn có thể nhận được kích thước khung nhìn của trình duyệt.

window.innerHeight; 
window.innerWidth; 

http://bit.ly/zzzVUv - Đã phải sử dụng Google Cache làm trang web sẽ không tải cho tôi. trang gốc: http://www.javascripter.net/faq/browserw.htm

Nếu bạn muốn phát hiện như thế nào đến nay họ đã cuộn xuống cuối trang, bạn có thể sử dụng

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

Ngoài ra, tôi đã tìm thấy một đối tượng cửa sổ - window.screen. Trên hệ thống của tôi, dữ liệu này có các dữ liệu sau:

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; 

Tôi hy vọng câu trả lời này đủ câu hỏi của bạn.