使用JS，有没有办法在浏览器窗口中检测哪些文本是可见的？

Question

使用jQuery，我选择专区内的所有文本与

var c = $('#content').text(); 

但我想只选择正在被浏览器窗口中查看的文本。因此，正如一个粗略的例子来阐明我的想法，看看下面的图片：

应仅返回：

的自行车车架是自行车的主要组成部分，在这轮和其他

但如果我打开浏览器，然后重新运行该代码

自行车车架是自行车的主要部件，车轮和其他部件安装在其上。直立式自行车的现代和最常见的车架设计基于安全自行车，由两个三角形，一个主三角和一对后三角组成。这就是所谓的钻石框架。 1框架需要坚固，坚硬和轻盈，它们通过结合不同的材料和形状来完成。

应该返回。

有没有办法在浏览器窗口中的某个特定时刻检测哪些文本是可见的？

Answer 1

是的，您需要测量视口来计算元素顶部的距离。看到这个fiddle。

$.fn.is_on_screen = function(){ 

    var win = $(window); 

    var viewport = { 
     top : win.scrollTop(), 
     left : win.scrollLeft() 
    }; 
    viewport.right = viewport.left + win.width(); 
    viewport.bottom = viewport.top + win.height(); 

    var bounds = this.offset(); 
    bounds.right = bounds.left + this.outerWidth(); 
    bounds.bottom = bounds.top + this.outerHeight(); 

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 

}; 

if($('.target').length > 0) { // if target element exists in DOM 
    if($('.target').is_on_screen()) { // if target element is visible on screen after DOM loaded 
     $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info  
    } else { 
     $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info 
    } 
} 
$(window).scroll(function(){ // bind window scroll event 
    if($('.target').length > 0) { // if target element exists in DOM 
     if($('.target').is_on_screen()) { // if target element is visible on screen after DOM loaded 
      $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info 
     } else { 
      $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info 
     } 
    } 
}); 

HTML

<div class="log">log</div> 

scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 


<div class="target label label-info">target element</div> 


scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 
scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> 

CSS

.log { 
    position: fixed; 
    right: 20px; 
    top: 20px; 
} 

Answer 2

我倒觉得：可见伪选择器可以帮助我们这一点。

$('<div/>').html($('.selector')).contents().filter(':visible').text();