웹사이트를 개발하다보면,
한 번의 스크롤로 다른 요소까지 같이 스크롤 하고 싶을 때가 있죠.
현재 진행하는 프로젝트가 두 개의 테이블을 만들어
하나의 테이블은 위쪽에
또 하나의 테이블은 아래쪽에 위치하여
위 아래로 스크롤을 하여도 위쪽에 있는 테이블은 헤더로서 고정되어있는 상태였죠.
해당 웹페이지가 줄어들어 위 아래가 아닌 좌 우 또한 스크롤 상태가 발생하였는데,
이 때 문제가 바로 헤더 테이블 따로 하위 테이블 따로 스크롤이 된다는 문제였죠.
그래서 해결법을 찾아보았는데,
해결법은 바로 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
사이트를 참고하시길 바랍니다.
'IT' 카테고리의 다른 글
| 맥에서 리눅스, 윈도우 부팅 USB 만들기 (1) | 2017.09.16 |
|---|---|
| MySQL: root 비밀번호(초기암호) 분실, 재설정 for Mac (0) | 2017.09.15 |
| 한 번의 스크롤로 동시에 다른 요소까지 스크롤 (0) | 2017.09.13 |
| 아이폰 메세지 맥북과 연동하기 (0) | 2017.09.07 |
| 파이썬 from Tkinter import 오류 해결법 (1) | 2017.08.28 |
| 맥북 OSX: 편리한 Homebrew 설치, 사용법 (0) | 2017.08.26 |