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



カスタムしたスクロールバーを実装してみます。
過去にJQUERY.JSCROLLPANE.MIN.JS:スクロールバーをカスタムする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>「BLINDER HIDDEN(ブラインダーヒドゥン)」は、WEBエンジニアの隠れたファインプレーを紹介するWEBサイトです。 </h2>
				<p>発信情報は、JavaScript、jQuery、Ajax、PHP、Android、java、WordPress、Facebook、HTML5、HTML、CSS、CSS3、MySQL、Linux、コマンド、SEO、スマートフォン、見えないデザイン、アイデア 等</p>
				
				<p>私、WEB制作会社でエンジニアをやっております。<br />
実際やっていることが多岐にわたることもままあり、<br />
WEBエンジニアという表現には常日頃疑問を抱いていますが、<br />
少なからず、<br />
設計→製作→運用→+αはよくやってます。<br />
<br />
WEBエンジニア = 見えない所をイイ感じにしてくれる人 + パソコンに詳しい人<br />
<br />
というイメージの中、同業の方以外には分かってもらえないことが多々あります。<br />
ここでは、特に製作の際に自画自賛するしかなかった内容と<br />
その他ワーク技術メモ的なことををご紹介します。</p>

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

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

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

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

両立出来るのが良いんでしょうけど…