jscrollpaneを使用しスクロールバーをちょっとだけカッコよくする!

公開日:2014年5月14日
最終更新日: 2015年3月12日

jquery_scroll_photo_01

こんにちは!

少し前までは、スクロールバーのカスタマイズは「Internet Explorer」しかできませんでした。しかもちょっと色を変更するぐらいのカスタマイズのみです。

しかし今は、便利な「jquery」などが出てきて、簡単にスクロールバーのカスタマイズが可能です。

今までは、あの味気ないデフォルトのスクロールバーしか設置できませんでしたので、デザインに合わせた、スクロールバーを設置できるのは、デザイナーとしては嬉しい限りです。

今回はそのスクロールバーのカスタマイズ方法を記事にしたいと思います。

デフォルトのスクロールバーを、カッコよくしましょう。

jquery_scroll_photo_02

目次!

1.設置手順!
2.デモページ!
3.対応ブラウザ!

設置手順!

jsの設置!

htmlのhead部分にスクロールバーのカスタマイズに必要なjsを記述してください。「.news_wrapper」の部分は各自のCSSのクラス名に合わせてください。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function(){
$('.news_wrapper').jScrollPane();
});
</script>

CSSの設置!

スクロール要素に必要なCSSを記述してください。
「scroll.css」でスクロールバーの幅や色の指定をしています。

<link rel="stylesheet" href="default.css" type="text/css" media="all"> <!-- スタイルをリセットするCSS -->
<link rel="stylesheet" href="scroll.css" type="text/css" media="all">

上記のjsとCSSを記述したhtml!

jsとCSSを記述したhtmlは以下のようになります。

<!DOCTYPE html>
<html lang="ja">

<html>
<head>
<meta charset="UTF-8">

<title>Scrollサンプル</title>

<link rel="stylesheet" href="default.css" type="text/css" media="all"> <!-- スタイルをリセットするCSS -->
<link rel="stylesheet" href="scroll.css" type="text/css" media="all">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>

<script type="text/javascript">
$(function(){
$('.news_wrapper').jScrollPane();
});
</script>
</head>

<body>

<div class="page">
<div class="news_wrapper">
  <dl class='news'>
    <dt>2014/05/14</dt>
    <dd><a href="http://aaa.com/">あああああ</a></dd>
    <dt>2014/05/14</dt>
    <dd><a href="http://aaa.com/">あああああ</a></dd>
    <dt>2014/05/14</dt>
    <dd><a href="http://aaa.com/">あああああ</a></dd>
    <dt>2014/05/14</dt>
    <dd><a href="http://aaa.com/">あああああ</a></dd>
    <dt>2014/05/14</dt>
    <dd><a href="http://aaa.com/">あああああ</a></dd>
  </dl>
</div>
</div>

</body>
</html>

以上で設定完了です。
デモページを用意しましたので、ご確認ください。

デモページ!

上記の設定をしたデモページを作成しました。

デモページのサンプルファイルはこちらよりダウンロードできます。

対応ブラウザ!

下記のブラウザで動作チェック済です。

Google Chrome(Windows)
Firefox(Windows)
Safari(Windows)
Internet Explorer 10(Windows)
Internet Explorer 9(Windows)
Internet Explorer 8(Windows)
Internet Explorer 7(Windows)

最後に!

人によってはどうでも良いと思うかもしれないですが、少しでもサイトが良くなり、他のサイトとの違いを生み出せるのであれば、導入する価値は十分にあると思います。

デフォルトのスクロールバーより、カッコいいスクロールバーバーの方が良いに決まってます。

以上「jscrollpaneを使用しスクロールバーをちょっとだけカッコよくする!」でした!

それではまた。

公開日:2014/05/14
最終更新日: 2015年3月12日
カテゴリー:jquery・js

関連記事

新着記事

コメント/トラックバック (1件)

トラックバック用URL:

この投稿のコメント・トラックバックRSS

  1. […] jscrollpaneを使用しスクロールバーをちょっとだけカッコよくする! […]




管理人にのみ公開されます

正しい数値を入力して下さい * Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly