<DIV> 컨테이너 속의 좌표를 얻어서 처리하기

div를 태그를 이용하여 스크롤을 지원하는 경우 단일 div태그를 사용하면 문제가 없지만 만약 멀티 div태그를 이용할 경우 첫번째 div태그의 스크롤 이벤트 발생시 두번째 div태그 컨테이너 속의 내용물도 자동으로 스크롤되게 지원하려면 결코 쉽지 않다.

사실 위와 같은 기능을 구현하기 위하여 여러가지 방법론들이 존재하고있지만 나는 가장 간단하고 단순(?) 한 방법을 사용하여 처리를 하기로 했다.

실제 iframe에서 처리하는 방식과 별반 차이가 없지만 현재 시점에서는 테스트를 거치지 않은 상태라...ㅠㅠ

기존 iframe에서 처리한 코드를 보이면 다음과 같다.

<SCRIPT language=javascript>
 
function F_scroll()
 {
 
var x =  document.body.scrollLeft;
  // 실제 x축의 좌표이다.
var y =  document.body.scrollTop;
   // 실제 y축의 좌표이다.
parent.LLL.scroll(0,y);
      // Frame태그속의 스크롤 속성으로 해당 좌표를 지정함
parent.HHH.scroll(x,0);
      // Frame태그속의 스크롤 속성으로 해당 좌표를 지정함
}

</SCRIPT>

이 코드는 iframe에 의하여 불러지는 페이지에 포함 되여진 소스이다.
소스를 살펴보면 쉽게 전반적인 구현방식을 파악할수 있다.
먼저 불러질 페이지의 윈쪽단 여백 수치를 불러서 x축의 좌표로 정한다.
다음 불러질 페이지의 윗쪽단 여백 수치를 불러서 y축의 좌표로 정한다.
마지막으로 이 페이지를 불러쓰는 페이지 즉 parent페이지속의 iframe태그의 scroll속성으로서 다른 페이지도 원하는 좌표로 스크롤이 되여지게 한다.

만약 div방식으로 구현하면 아마 소스가 아래와 같아 질것이다.^^ (단순추측임... 테스트는 차후에...)