스크롤 초기화 막기

배경
아래의 그림은 iframe을 사용한 것이 아닌, Fixed Header Gridview 기술을 적용한 모습이다.

 

 

좌측 리스트 중 하나의 행을 클릭 시, 오른 쪽에 데이터가 변하도록 하는 것이다. 위의 화면을 만들기 위해서는 보통 몇 가지 기술을 함께 써야하는데, 다음과 같다.

① GridView의 행을 클릭했을 때 PostBack을 보내줄 수 있는 Select 이벤트를 Row에 들어갈 수 있도록 RowDataBound 이벤트와 SelectedIndexChanged이벤트를 추가하는 것
② PostBack 으로 넘길 때, 에러나지 않도록 페이지의 EnableEventValidation를 "false"로 지정하는 것
③ Fixed Header GridView 스크립트를 넣어주는 것 (CSS, SKin쪽 수정)
④ 해당 Mouse Rollover시 색상 변하도록 Javascript 주는 것과, Select 된 Row는 색상 변하지 않게 하는 스크립트 추가
⑤ 마지막으로 스크롤해서 선택 시, 스크롤 초기화 되지 않도록 방지하는 것 이다.

 

이 중 다섯번째 것에 해당되는 스크롤 초기화를 막는 방법을 살펴보자.

 

소스코드

<script language="javascript">
    var scrollTop = 0;
    var scrollLeft = 0;
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function EndRequestHandler(sender, args) {
        setScroll();
    }

    function setScroll()
    {
        document.getElementById('AdjResultsDiv').scrollTop = scrollTop;
        document.getElementById('AdjResultsDiv').scrollLeft = scrollLeft;
    }
   
    function saveScroll()
    {
        scrollTop = document.getElementById('AdjResultsDiv').scrollTop;
        scrollLeft = document.getElementById('AdjResultsDiv').scrollLeft;
    }
</script>

............ 

<div id="AdjResultsDiv" onscroll="javascripｔ:saveScroll();">
 <asp:GridView ....>
 </asp:GridView>
</div>

 

위의 Sys.WebForms.PageRequestManager.getInstance() 라고 정의 하는 부분은 페이지를 초기화 할 때 작동하는 이벤트다. 이 이벤트 안에 setScroll() 함수를 정의하는 것이고, 스크롤할 때마다는 div에서 saveScroll()함수를 호출하도록 한다. 생각 보다 쉬운 스크립트인데, 막상 써먹을려고 하면 잘 기억나지 않는 로직이다.

 

잡담
언제 기회가 되면 ①,②,③,④ 관련 기술도 소개하고 싶다. Asp.net은 MS의 기준에 맞추어 새롭게 이해를 구해야하는 부분이 많아, 이해도 힘들고 설명도 힘들다. 100% 이해라기 보다는, 늘 대충 구현 윤곽을 잡고, Googling을 해야하는 현실이니다 보니, 스크립트를 알려줘도 적용 성공률은 개발자의 관련지식 정도와 비례한다.