[jQuery] 2개의 요소에 있는 스크롤바 동시에 움직이기

   요즘 만들어보고 싶은 사이트가 있는데, 거기에 적용할 기능들 중의 하나가 2개의 스크롤바를 동시에 움직이는 기능이다.

   조선왕조실록 사이트를 보면 국역/한문 컨텐츠를 열었을 때,

http://sillok.history.go.kr/viewer/viewtype1.jsp?id=kna_12506021_004&mTree=0&inResult=0&indextype=1&keyword=%ED%95%9C%EC%82%B0%EB%8F%84

   이런 식으로 보이는데, 양이 다른 2개의 내용을 어떻게 이렇게 싱크를 맞춰서 잘 움직이게 해놨을까 궁금했다. 나도 이렇게 하고 싶은데!

   소스 보기로 분석을 해봐도 나오지 않길래 바로 구글링 들어갔다.

   거의 다 jQuery를 사용한 예였다. 

   단순하게 스크롤 비율을 생각하지 않고 그냥 한 쪽 스크롤이 움직일 때, 다른 한 쪽 스크롤이 움직이게 만드는 건 쉽다.

$("#div1").scroll(function () {
    $("#div2").scrollTop($("#div1").scrollTop());
    $("#div2").scrollLeft($("#div1").scrollLeft());
});
$("#div2").scroll(function () { 
    $("#div1").scrollTop($("#div2").scrollTop());
    $("#div1").scrollLeft($("#div2").scrollLeft());
});

   비율 맞춰주는 건 여기에 조금 더 코드가 추가된다.

   따로 코드를 올리는 것보다, 데모까지 바로 볼 수 있는 아래 사이트들을 참고하는 편이 더 좋을 듯하다.

   http://jsfiddle.net/b75KZ/5/

   http://hugoware.net/snippets/jquery-dual-scroll

   여담...> jQuery는 정말 안되는 게 없다. 굿굿...