Skip to content

Latest commit

 

History

History
103 lines (93 loc) · 2.85 KB

README.md

File metadata and controls

103 lines (93 loc) · 2.85 KB

Scrollbar

##Introduce 웹브라우저에서 사용되는 기본 스크롤바입니다.

Demo

##How to Use ####HTML 아래와 같이 감싸는 태그와 보일 영역의 태그, 그리고 내용 태그로 작성합니다.

<div class="wrap">
	<div class="box">
		<div class="content">
			...
		</div>
	</div>
</div>

####CSS 전체 감싸는 태그와 내용 감싸는 태그는 반드시 가로, 세로 길이를 명시하여야 합니다. 다만 세로 길이를 퍼센트로 명시할 경우 화면에서 보이지 않을 수 있습니다. 한가지 주의할 점은, Javascript로 생성된 클래스(기본: customClass)를 중심으로 작성하여 합니다.

.customClass {
	width: 100%;
	height: 250px;
}
.customClass-viewport {
	width: 100%;
	height: 248px;
	border: 1px solid #e5e5e5;
}
.customClass-scrollbar {
	top: 0px;
	right: 0px;
	width: 15px;
}
.customClass-track {
	width: 15px;
	height: 15px;
	background: #e5e5e5;
}
.customClass-thumb {
	width: 15px;
	height: 15px;
	background: #ccc;
}
.customClass-first-thumb {
	width: 15px;
	height: 15px;
	background: #b3b3b3;
}
.customClass-end-thumb {
	width: 15px;
	height: 15px;
	background: #b3b3b3;
}

####JAVASCRIPT jquery 플러그인을 작성할 경우 아래와 같이 작성합니다.

$( '.customClass' ).scrollbar( );

javascript으로 작성할 경우 아래와 같이 작성합니다.

new Scrollbar( {
	wrapping: document.getElementsByClassName( 'customClass' )[ 0 ],
	viewport: document.getElementsByClassName( 'customClass-viewport' )[ 0 ],
	contents: document.getElementsByClassName( 'customClass-contents' )[ 0 ]
} );

##method

  • update: 내용 업데이트

####jquery option

  • $wrapping: {jQuery Selector} (default: $( this )) 전체 감쌈
  • $viewport: {jQuery Selector} (default: $( this ).find( '>[class$="viewport"]' )) 보이는 영역
  • $contents: {jQuery Selector} (default: $( this ).find( '>[class$="contents"]' )) 내용 영역

####javascript option

  • wrapping: required {elements} (default: null) 전체 감쌈
  • viewport: required {elements} (default: null) 보이는 영역
  • contents: required {elements} (default: null) 내용 영역

####common option

  • axis: {String} (Default: 'y') 스크롤바가 생성될 축
  • wheel: {Integer} (Default: 40) 마우스 휠로 스크롤할 시 스크롤바 움직일 정도
  • customClass: {String} (Default: 'customClass') 사용자 클래스
  • appendButton: {Boolean} (Default: true) 상/하 스크롤바 버튼 사용 여부, 혹은 좌/우
  • create: {Function} (default: null) 생성시 콜백 함수
  • update: {Function} (default: null) 업데이트 후 콜백 함수
  • active: {Function} (default: null) 스크롤 후 콜백 함수

Copyrights