JavaScript

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

  /

Webサイトのユーザー体験を向上させるために、スクロールバーをカスタマイズすることは効果的です。特に長いコンテンツを表示する際には、見た目も操作性も重視したいものです。この記事では、jquery.tinyscrollbar.jsを使って、簡単にカスタムスクロールバーを実装する方法を紹介します。

Contents

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

まず、カスタムするスクロールバーのCSSを設定します。以下のCSSコードを使用して、スクロールバー（#scrollbar1）のスタイルをカスタマイズします。

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

　
このCSSコードをHTMLファイルに追加し、必要に応じてスタイルを変更してください。

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

次に、jquery.min.jsとjquery.tinyscrollbar.min.jsファイルを読み込みます。そして、カスタムするスクロールバーエリア（#scrollbar1）に対して、以下のように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>

　
このコードをHTMLファイルに追加することで、ページ読み込み時にカスタムスクロールバーが適用されます。

カスタムスクロールバーを表示する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>

　
このHTMLコードを使用することで、カスタムスクロールバーとコンテンツエリアが正しく表示されます。

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

以下のリンクから、カスタムスクロールバーのデモページを確認できます。

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

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

詳細な情報やソースコードは、以下のリンクから確認できます。

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

まとめ

カスタムスクロールバーを使用することで、Webサイトのデザイン性やユーザー体験を向上させることができます。しかし、見た目の改善だけでなく、動作やシステム面での弊害が出ないように、しっかりと端末やブラウザの検証を行うことが重要です。ぜひ、このガイドを参考にして、カスタムスクロールバーを実装してみてください。

このブログ記事が、初心者エンジニアや閲覧者にとってわかりやすく、実際の実装に役立つことを願っています。

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

jquery.tinyscrollbar カスタムスクロールバー
関連記事