코드펜 https://codepen.io/gamza/pen/VbEOYv
▣ 구상
- 스크롤바 드래그 시 컨텐츠가 역방향으로 움직입니다.
▣ 조건
➊ 컨텐츠
➋ 스크롤바
➌ 드래그 기능 ( 역방향 이동 )
▣ 준비
· 컨텐츠에 들어갈 이미지 ( 300px * 1000px )
· 스크롤바 드래그 기능을 위한 메소드 draggable( ) 를 사용하기 위해서
jquery-ui.min.js 를 추가합니다. ( v1.8.23 )
◆ 레이아웃 ( html, css )
1. 컨텐츠 영역 / 스크롤바 영역을 div로 나눕니다.
2. 컨텐츠를 float : left 시켜 좌측으로 보냅니다.
3. 스크롤바를 컨텐츠의 width 만큼 오른쪽으로 옮깁니다.
4. 컨텐츠와 스크롤바를 감싸는 부모요소( viewport )를 추가하여,
컨텐츠 내부 이미지가 viewport 로부터 overflow 할 수 있도록 설정합니다.
● html
1 2 3 4 5 6 7 8 | <div id = "wrap"> <div id="content"> <img src="pg.jpg" /> </div> <div id ="scrollBar"> <div id="bar"></div> </div> </div> |
● css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #wrap{ width:330px; height:600px; margin:100px auto; overflow:hidden;}#content{ height:600px; width:300px; float:left;}#scrollBar{ width:30px; height:600px; margin-left:300px; background-color:#c8c8c8;}#bar{ width:30px; height:30px; background:#000;} |
◆ 기능( jquery )
1. 컨텐츠의 position 을 동적으로 움직이기 위해 다음 css 를 추가합니다.
1 | #content{position:relative;}; |
2. 스크롤바 클릭 - 드래그
3. 드래그 시 컨텐츠의 top 값 역방향으로 동적 변경
● javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $("#bar").draggable({axis:'y',containment:'parent'}); $("#bar").on("drag",function(event, ui){ getPos() }); var min = 0; // 컨텐츠 기본 top 값 var max = -400; // 컨텐츠 최대(소) top 값 ( -400 을 초과하면 여백이 올라온다. ) function getPos(){ var barTop = $("#bar").css("top"); // 스크롤바의 top값 변수저장 barTop = parseInt(barTop); // 실수를 정수로 변환 var pos = ( barTop*( max - min ))/570 + min; // 스크롤값 - 컨텐츠 top값으로 변환 $("#content").css("top",pos); } |
