웹사이트를 개발하다보면,

한 번의 스크롤로 다른 요소까지 같이 스크롤 하고 싶을 때가 있죠.

현재 진행하는 프로젝트가 두 개의 테이블을 만들어

하나의 테이블은 위쪽에 

또 하나의 테이블은 아래쪽에 위치하여

위 아래로 스크롤을 하여도 위쪽에 있는 테이블은 헤더로서 고정되어있는 상태였죠.

해당 웹페이지가 줄어들어 위 아래가 아닌 좌 우 또한 스크롤 상태가 발생하였는데,

이 때 문제가 바로 헤더 테이블 따로 하위 테이블 따로 스크롤이 된다는 문제였죠.

그래서 해결법을 찾아보았는데,

해결법은 바로 JQuery를 이용하여 해결하는 예제입니다.

위의 구문은 헤더 테이블의 스크롤이 발생시 수행되는 구문입니다.

그럼 괄호안에는 어떤 구문이 들어가야할까요?

하위테이블은 헤더테이블을 좌우로 스크롤할 때 같이 스크롤되는 위와 같은 구문이 들어가게 됩니다.

반대로 위 아래를 컨트롤 할 때에는 scrollTop()함수를 사용하면 됩니다.

이제까지 처리해준 구문은 헤더 테이블의 스크롤 발생 시 처리되는 구문이기에

하위 테이블 스크롤 발생 시 또한 처리해주어야 합니다.

그럼 결과적으로 다음과 같은 소스코드가 나오게되죠.

이렇게 구현하게 되면 

하위 테이블을 스크롤하던 

헤더 테이블을 스크롤하던 

동시에 스크롤이 가능하게 됩니다.

다만, 해당 구문은 같은 사이즈라는 가정하에 진행되어진 코드이며,

비율에 맞춰 스크롤을 하기 원하신다면,

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

사이트를 참고하시길 바랍니다.