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

カスタムしたスクロールバーを実装してみます。

1.CSSの記述

<style type="text/css">
<!--
/* 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>

2.読込むJsとJavaScriptの記述

<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>

3.HTMLの記述例

<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>

				
ゆくゆくはDAD=「お父さん」「おやじ」、UNION=「連合」「組合」で世のお父さん・おやじ同士で組合を作って「こっちだって色々頑張ってんだよ」を主張し春闘し、お父さんの価値を少しでもベースアップしていければと考えております。
				
				
私、WEB制作会社でエンジニアをやっております。
実際やっていることが多岐にわたることもままあり、
WEBエンジニアという表現には常日頃疑問を抱いていますが、
少なからず、
設計→製作→運用→+αはよくやってます。

WEBエンジニア = 見えない所をイイ感じにしてくれる人 + パソコンに詳しい人

というイメージの中、同業の方以外には分かってもらえないことが多々あります。
ここでは、特に製作の際に自画自賛するしかなかった内容と
その他ワーク技術メモ的なことををご紹介します。

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

jquery.tinyscrollbar:カスタムスクロールバー表示するデモページ

ソース元:Tiny Scrollbar: A lightweight jQuery plugin

スクロールバーをカスタムするのは良いのですが、見た目が良くなっても動作だったりシステム的な弊害が出てしまうと問題ですよね。