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

我有一个要求是能够找出当溢出时当前可见的元素文本(可能是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

解决方法:

此函数应该告诉您元素是否完全可见：

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 fork在这里：

http://jsfiddle.net/9F5eh/