한 번의 스크롤로 동시에 다른 요소까지 스크롤

Posted by 드린
2017. 9. 13. 23:52 IT

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

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


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

하나의 테이블은 위쪽에 

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

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


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

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


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

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


$(".top").scroll(function() { //스크롤 발생 시 처리할 구문 });

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


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

$(".bottom").scrollLeft($(".top").scrollLeft());

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


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


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

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


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

//동시에 스크롤 구현

            $(".top").scroll(function() {

                $(".bottom").scrollLeft($(".top").scrollLeft());

            });


            $(".bottom").scroll(function() {

                $(".top").scrollLeft($(".bottom").scrollLeft());

            });


이렇게 구현하게 되면 

하위 테이블을 스크롤하던 

헤더 테이블을 스크롤하던 

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


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

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

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

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

이 댓글을 비밀 댓글로