오버플로가있는 요소의 보이는 부분을 확인하십시오.

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"); 
}); 

, 녹색 사업부에서 나는 원래보고 싶어 : '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 포크

은 여기에 있습니다 :

$("#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() + ', '); 
    }); 
}); 

당신은 상자의 가장자리의 각각의 값을 계산이 같은

http://jsfiddle.net/9F5eh/

Answer 2

당신은 this plugin을 시도 할 수 있습니다.

또는 요소 오프셋을 계산해야합니다.

Answer 3

뭔가 트릭을 할해야합니다. 그런 다음이 상자 안의 모든 요소를 ​​가져 와서이 요소의 왼쪽 상단이 보이는지 확인합니다. 이것이 사실이라면 필터는 그 요소를 유지하게하고 그렇지 않으면 항목을 버립니다. 그러므로 우리는 elems에서 'view in'의 모든 요소들로 끝납니다. .children(), .filter()

JsFiddle : 문서

http://jsfiddle.net/4pAge/