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

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/

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

3 个答案: