javascript - 使用 JS，有没有办法检测在浏览器窗口中可以查看哪些文本？

Question

使用 jQuery，我使用

选择一个 div 中的所有文本

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

但我只想选择在浏览器窗口中查看的文本。因此，作为一个粗略的例子来阐明我的想法，请看下图:

应该只返回:

A bicycle frame is the main component of a bicycle, onto which wheels and other

但是如果我打开浏览器并重新运行代码

A bicycle frame is the main component of a bicycle, onto which wheels and other components are fitted. The modern and most common frame design for an upright bicycle is based on the safety bicycle, and consists of two triangles, a main triangle and a paired rear triangle. This is known as the diamond frame.1 Frames are required to be strong, stiff and light, which they do by combining different materials and shapes.

应该归还。

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

Answer 1

是的，您需要测量视口(viewport)以计算元素距顶部的距离。看这个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;
}