Naver의 스크롤 객체, NvScroll

심심해서(--;;;) Naver 홈페이지를 보다 뉴스페이지의 스크롤 코드를 들여다 봤습니다.
Naver의 코드 자체는 깔끔하게 잘되어있던 것 같습니다. naming rule 등도 잘 정리되어 있구요.

prototype이나 dojo 등의 라이브러리는 사용하지 않았고, dom 객체보다 document.write를 통해서 html코드를 써내려가는 경우가 많다는 점이 좀 아쉬운 생각이 들더군요. 스크롤 코드의 구조는 다음과 같습니다.

기본적인 아이디어는 다음과 같습니다. setTimeout을 호출하여 scroll을 recursion으로 호출합니다. 이 때 scroll의 안에 있는 플래그를 통하셔 스크롤할 지 또는 멈춰있을지를 결정을 하게 되는 거죠. 스크롤 자체는 어떠한 이펙트도 사용하지 않고 위치할 div의 top과 left의 style 속성을 지정함으로 scroll 대상을 이동시키고 있습니다.

그리고, onmouseover, onmouseout을 통하셔 마우스가 NvScroll위에 존재할 때는 이를 동작하지 않도록 처리도 되어있습니다. 설계 시에는 깔끔했을 것 같은데 기능추가에 따른 확장에서 약간 지저분해졌다는 생각도 들기도 합니다.

궁금하신분은 Naver의 뉴스창에서 소스를 찾아보세요 ^^

출처 : 네이버 뉴스