javascript - 识别具有溢出的元素的可见部分

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/