https://codepen.io/gamza/pen/VbEOYv
---------------------------------------------------------------------------------------------------------------
<div id = "wrap">
<div id="content">
<img src="http://sevensprings.dothome.co.kr/img/3.jpg" />
</div>
<div id ="scrollBar">
<div id="bar"></div>
</div>
</div>
---------------------------------------------------------------------------------------------------------------
#wrap{
width:330px;
height:600px;
margin:50px auto;
overflow:hidden;
}
#content{
position:relative;
height:600px;
width:300px;
float:left;
}
#scrollBar{
width:10px;
height:600px;
margin-left:300px;
background-color:#c8c8c8;
}
#bar{
width:30px;
height:50px;
background:#000;
}
---------------------------------------------------------------------------------------------------------------
$(function(){
$("#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);
}
});
---------------------------------------------------------------------------------------------------------------