[강좌] div로 만든 스크롤의 위치 알아내기

div 에 overflow:auto; 를 먹여주면 , iframe 처럼 생긴 박스를 만들수 있다. 이 박스가 iframe 보다 좋은건 따로 페이지를 만들어서 링크를 걸어줘야 하는 불편함이 없다는 점이랄까?

div에 스크롤을 만들었을때 , 스크롤되고 있는 위치를 알아내는 방법이다. 스크롤 위치를 알아내면 다양한곳에 응용이 가능하다.

예를 들면 , paging 을 대체할수 있다. 내용의 스크롤을 내리고, 현재위치를 계산해서 어느정도 스크롤이 되었을때 div 내용 아래쪽에 다음 페이지 내용을 추가 해주는것이다. 이렇게 하면 사용자는 그냥 휠로 스크롤을 내리면 되고 리스트를 계속 볼수 있게 된다.

http://wgirls.nonun.com/ 를 방문하면 위에서 예로 설명한것을 몸으로 알수 있다.

스크롤을 내리면 이미지들이 아래로 계속 추가된다.

prototype을 사용했다.

<style>
#scroll__{
   width:300px;
   height:200px;
   border:2px solid #999999;
   overflow:auto;
}
</style>
<script language="javascript" src="/prototype.js"></script>
<script>
   function getPosition(){
//스크롤 총 높이
       var t=$('scroll__').scrollHeight;
//현재 스크롤 위치
       t=t+','+$('scroll__').scrollTop;
//위치를 뿌려준다
       $('po').innerHTML=t;
   }
</script>
<div id="po"></div>
<div id="scroll__">테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 </div>
<script>
//이벤트 옵저버 : 스타크의 옵저버랑 비슷함 -_-; 계속 상황을 감시하는 역활을 한다.
   Event.observe('scroll__','scroll',getPosition,false);
</script>

위 소스에서는 <div id="po"></div> 에 스크롤의 위치가 계속 변하면서 찍힌다. 이 값을 응용해서 쓰면 된다.

[!] 현재 페이지의 스크롤 위치를 구할려면?
--> document.body.scrollTop