jQuery로 스크롤 div의 상단과 하단에있는 DOM 요소 찾기

Question

목록 항목이 포함 된 스크롤 div가 있습니다. 나는이 상용구 스크롤 이벤트가이 스크롤 이벤트 기능의 내부

$("#scrollingDiv").scroll(function(e) { 

}); 

정의가 어떻게 현재 보이는 영역의 상단과 하단에있는 요소 알아낼 수 있습니까?

Answer 1

당신은 스크롤 <div>에 대한 목록 항목의 위치를 ​​계산하려고 다음 사람이 <div>의 scrollTop와 일치하는 볼 위치를 스캔 할 수 있습니다. 아마도 이런

은

뭔가 :

var base = $('#scrollingDiv').offset().top; 
var offs = [ ]; 
$('li').each(function() { 
    var $this = $(this); 
    offs.push({ 
     offset: $this.offset().top - base, 
     height: $this.height() 
    }); 
}); 
$("#scrollingDiv").scroll(function() { 
    var y = this.scrollTop; 
    for(var i = 0; i < offs.length; ++i) { 
     if(y < offs[i].offset 
     || y > offs[i].offset + offs[i].height) 
      continue; 
     // Entry i is at the top so do things to it. 
     return; 
    } 
}); 

라이브 버전 (콘솔 제발 열) : http://jsfiddle.net/ambiguous/yHH7C/

당신은 아마 현명하게 작동하는 무언가를 얻기 위해 if의 흐릿한 놀고 싶어 것 (보이는 1px는 요소를 상위 1 장으로 만듭니다.)하지만 기본 아이디어는 충분히 명확해야합니다. #scrollingDiv의 높이로 혼합하면 하단에 <li>이있는 것을 볼 수 있습니다.

목록 항목이 많으면 선형 검색이 원하는 것이 아닐 수 있지만 너무 많은 노력을 기울여야 해결할 수 있습니다.