我可以檢測瀏覽器上的用戶可查看區域嗎？

正如您可以看到下面的圖片，網站上有「A」，「B」，「C」，「D」和「E」，用戶只能看到A，B和一些在他們的瀏覽器中的D部分。他們需要向下滾動瀏覽器，或者某些用戶可能會有更大的屏幕或瀏覽器上的更長時間的窗口，以便他們甚至可以看到元素C.我可以檢測瀏覽器上的用戶可查看區域嗎？

好的，我的問題是，是否有可能讓我知道用戶在瀏覽器中使用javascript看到了什麼？在這個元素中，是「A」，「B」和「D」。

enter image description here

來源

2012-02-14 DNB5brims

您可以檢查[http：// stackoverflow。COM /問題/ 704758 /如何做檢查，IF-的元素 - 是 - 真的 - 可見 - 用JavaScript的（http://stackoverflow.com/questions/704758/how-to-check-if-an -element-is-really-visible-with-javascript）來解答類似的問題。 – Bill 2012-02-14 04:55:35

試試吧:) 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的左邊，頂邊和右邊，底邊是否都在屏幕的可見部分，部分或在視口外。

來源

2012-02-14 05:10:21 Cheery

好的答案，有沒有一種方法來適應這種情況，以計算視圖中的像素數量，當一個元素部分在視圖中時？我在這裏問了一個類似的問題http://stackoverflow.com/questions/28685693/get-the-number-of-an-elements-pixels-which-are-inside-the-viewport – tripRev 2015-02-23 23:51:59

@tripRev沒有問題，拿一個視圖的水平滾動，減去對象的左邊緣 - 它會告知左邊有多少對象隱藏。從對象的整個寬度中減去它，找出結果和視圖寬度之間的差異。它會告訴對象是完全顯示還是隻是其中的一部分（顯然，視圖的寬度）。垂直方向重複相同的操作。 – Cheery 2015-02-24 23:10:33

你可以通過窗口的可見區域，

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/

來源

2012-02-14 04:53:03

我已經創建了相同的工作示例。 http://jsfiddle.net/parag1111/kSaNp/1/ – 2012-02-14 06:31:42

基本上，你」 d首先必須測量視口尺寸ns，通過使用窗口對象，然後你需要遍歷你想要檢查的每個元素，並計算它們是否合適。

查看此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'); 
})

來源

2012-02-14 05:01:56

使用以下命令，可以獲得瀏覽器的視口大小。

window.innerHeight; 
window.innerWidth;

http://bit.ly/zzzVUv - 必須使用Google Cache作爲網站不會爲我加載。原始網頁： 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;

我希望這些能夠充分回答您的問題。

來源

2012-02-14 05:49:00 Shane

我可以檢測瀏覽器上的用戶可查看區域嗎？

回答

相關問題