jquery.tinyscrollbar：カスタムスクロールバーを表示するJs DAD UNION

jquery.tinyscrollbar.jsを使って、カスタムされたスクロールバーを表示する方法をご紹介します。

Contents

カスタムスクロールバーを表示するCSSの記述
jquery.tinyscrollbar.jsを使って、カスタムスクロールバーを表示するJavaScriptの記述
カスタムスクロールバーを表示するHTMLの記述
jquery.tinyscrollbar：カスタムスクロールバー表示するデモページ
- ソース元：Tiny Scrollbar: A lightweight jQuery plugin

カスタムスクロールバーを表示するCSSの記述

※カスタムするスクロールバー（#scrollbar1）のcssの記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:800px;
	margin:0 auto;
	text-align:left;
}
h2{
	font-size:16px;
	font-weight:normal;
	line-height:1.6em;
}
p{
	line-height:1.4em;
	font-size:14px;
}

/* Tiny Scrollbar */
#scrollbar1 { width: 520px; margin: 20px auto 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#scrollbar1 .scrollbar{ background: transparent url(images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar1 .track { background: transparent url(images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#scrollbar1 .thumb .end { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#scrollbar1 .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
-->
</style>

jquery.tinyscrollbar.jsを使って、カスタムスクロールバーを表示するJavaScriptの記述

※jquery.min.jsとjquery.tinyscrollbar.min.jsファイルを読み込みます。カスタムするスクロールバーエリア（#scrollbar1）に対して、$(‘#scrollbar1’).tinyscrollbar()と記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#scrollbar1').tinyscrollbar();	
	});
</script>

カスタムスクロールバーを表示するHTMLの記述

※カスタムするスクロールバーエリア（id=”scrollbar1″）にスクロールバー（class=”scrollbar”）とコンテンツエリア（class=”viewport”）を設定します。

<div id="idWrap">
	<h1>カスタムされたスクロールバーを以下に表示します</h1>


	<div id="scrollbar1">
		<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
		<div class="viewport">
			 <div class="overview">
				<h2>「DAD UNION（ダットユニオン）」は「世のお父さんをもっと生きやすく」をテーマにしたWEB技術メディアです。 </h2>
				<p>ゆくゆくはDAD＝「お父さん」「おやじ」、UNION＝「連合」「組合」で世のお父さん・おやじ同士で組合を作って「こっちだって色々頑張ってんだよ」を主張し春闘し、お父さんの価値を少しでもベースアップしていければと考えております。</p>
				
				<p>私、WEB制作会社でエンジニアをやっております。<br />
実際やっていることが多岐にわたることもままあり、<br />
WEBエンジニアという表現には常日頃疑問を抱いていますが、<br />
少なからず、<br />
設計→製作→運用→＋αはよくやってます。<br />
<br />
WEBエンジニア ＝ 見えない所をイイ感じにしてくれる人 ＋ パソコンに詳しい人<br />
<br />
というイメージの中、同業の方以外には分かってもらえないことが多々あります。<br />
ここでは、特に製作の際に自画自賛するしかなかった内容と<br />
その他ワーク技術メモ的なことををご紹介します。</p>

			</div><!--/overview-->
		</div><!--/viewport-->
	</div><!--/scrollbar1-->


</div>