確定具有溢出的元素的可見部分

Question

我有一個要求，能夠找出哪些元素（可以是div或文本框）的文本在溢出時當前可見。

隨着用戶上下滾動，我需要有一個可見文本的更新列表。

我對使用什麼元素沒有任何限制，只有一部分文本是可見的，所以我自然會想到div或文本框。

HTML部分：

<div id="box"> 
    <p>1</p><p>2</p><p>3</p> 
    <p>4</p><p>5</p><p>6</p> 
    <p>7</p><p>8</p><p>9</p> 
    <p>10</p><p>11</p><p>12</p> 
</div> 
<div id="result"> 
    Visible Items: 
</div> 

CSS部分：

#box{ 
    width: 100px; 
    height: 120px; 
    overflow: scroll; 
    background: yellow; 
} 
#result{ 
    width: 400px; 
    height: 50px; 
    background: green; 
} 

的jQuery：

$("#box").scroll(function() { 
    $("#result").append("Hello"); 
}); 

在這個例子中，在綠色的div我本來希望看到： '1' '2'和'3'，但隨着用戶向下滾動它將變成'2''3''4'等等。

See a js fiddle example here

Answer 1

此功能會告訴你一個元素是否是完全可見：

var isVisible = function(elem, container) { 
    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).outerHeight(); 
    return elemTop >= 0 && elemBottom <= $(container).outerHeight(); 
} 

如果你需要知道的東西是否是部分可見這應該工作：

var isVisible = function(elem, container) { 
    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).outerHeight(); 
    return elemBottom > 0 && elemTop < $(container).outerHeight(); 
} 

這些假設，我們只擔心垂直滾動。

的的jsfiddle叉是在這裏：

http://jsfiddle.net/9F5eh/

Answer 2

你可以試試this plugin。

或者您必須計算任何元素偏移量。

Answer 3

像這樣的東西應該做的伎倆：

$("#box").scroll(function() { 
    var left = $('#box').offset().left; 
    var top = $('#box').offset().top; 
    var right = left + $('#box').width(); 
    var bottom = top + $('#box').height(); 
    var elems = $('#box').children('p').filter(function(i) { 
     var offset = $(this).offset(); 
     return (offset.left >= left && offset.left <= right) && (offset.top >= top && offset.top <= bottom); 
    }); 

    //elems contains all elements we consider 'in view' 
    $('#result').html(''); 
    elems.each(function(e) { 
     $('#result').append($(this).html() + ', '); 
    }); 
}); 

您計算值，每個盒子的邊緣。然後你得到這個盒子裏的所有元素，看看這個元素的左上角是否在視圖中。如果這是真的，我們使過濾器保持該元素，否則我們丟棄該項目。因此，我們最終在elems中查看了所有元素。

文檔：.children()，.filter()

的jsfiddle：http://jsfiddle.net/4pAge/