JavaScript

jquery.tinyscrollbar.jsを使ってカスタムスクロールバーを表示する方法

  /

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

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

jquery.tinyscrollbar.jsを使ってカスタムスクロールバーを表示する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>

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

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

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

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

　
スクロールバーをカスタムするのは良いのですが、見た目が良くなっても動作だったりシステム的な弊害が出てしまうと問題なので端末・ブラウザ検証が必要です。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

jquery.tinyscrollbar カスタムスクロールバー
RELATED POST