custom scroll

코드펜  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 

<div id = "wrap">
    <div id="content">
        <img src="pg.jpg" />
    </div> 
    <div id ="scrollBar">
        <div id="bar"></div>
    </div> 
</div>

● css

#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 를 추가합니다.

#content{position:relative;};

2.  스크롤바 클릭 - 드래그

3.  드래그 시 컨텐츠의 top 값 역방향으로 동적 변경

 

● javascript

$("#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);
	}