WordPressの勉強がてら

WordPressの初心者が独学でホームページ作成したときの技術メモ

WordPressの勉強がてら

スクロールバーをかっこよくデザインする

      2014/12/11

新着情報などトップページに固定サイズの枠内で表示させるとき、デフォルトの状態だとかなりかっこ悪いので見栄え良くする方法をメモ

これを

こんな感じにする。

スポンサーリンク

 

「jscrollpane」を使う

jqueryのプラグインjscrollpaneをつかいます。

http://jscrollpane.kelvinluck.com/

から必要ファイルをダウンロード

必要なファイル

・jquery.jscrollpane.min.js
・jquery.mousewheel.min.js
・jquery.jscrollpane.css

ソースコード

ハイライト部が組み込みに必要なところです。
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="format-detection" content="telephone=no">
<title>Sample</title>

<link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('.scroll_area').jScrollPane();
    });
</script>
<style type="text/css">
<!--
 .scroll_area {
     width: 200px;
     height: 100px;
     overflow: auto;
     background-color: #eed;
 }
-->
</style>
</head>

<body>
    <div class="scroll_area">
        <p id="1">1.あああああ</p>
        <p id="2">2.あああああ</p>
        <p id="3">3.あああああ</p>
        <p id="4">4.あああああ</p>
        <p id="5">5.あああああ</p>
        <p id="6">6.あああああ</p>
        <p id="7">7.あああああ</p>
        <p id="8">8.あああああ</p>
        <p id="9">9.あああああ</p>
        <p id="10">10.あああああ</p>
        <p id="11">11.あああああ</p>
        <p id="12">12.あああああ</p>
        <p id="13">13.あああああ</p>
        <p id="14">14.あああああ</p>
        <p id="15">15.あああああ</p>
    </div>
</body>
</html>

ポイント:.scroll_areaボックスは高さを指定して、overflow:hidden;を指定する(またはauto)

バーの色や大きさはjquery.jscrollpane.css で指定できます。見たらなんとなくわかると思います。

プログラムでスクロールさせる

上記で一応完成なのですが、id=”10″ の場所にスクロールせさるといったように自由にjqueryでスクロールさせたい場合

var pane = $('.scroll_area');
pane.jScrollPane(
{
animateScroll: true
}
);
var api = pane.data('jsp');

//スクロールバー移動 id="#10"へ
api.scrollToElement('#10', true);

こんな感じです。

animateScrollを指定することでアニメーションスクロールします。ほかにもいろいろオプション指定できるみたいです。

まとめ

これまで仕事で作成したスクロールバーを使うWebサイトでは必ずと言っていいほどこのプラグインを使用しています。

デフォルトのスクロールバーのままはちょっとカッコ悪いですよね。といいつつこのサイトのサンプルコード部のバーデフォルトだったりする。個人サイトなので例外ということで・・・

 

 - jQuery

  • このエントリーをはてなブックマークに追加

  関連記事

thum_jquery
jScrollPaneをレスポンシブ対応する

スクロースバーを使うときはいつも「jScrollPane」を使ってます。使い方は …

thum_jquery
ページ内リンクをスムーズスクロール

サイト内を滑らかにスクロールさせます。 ほぼ必ずサイトの右下などに「Topへ戻る …

thum_jquery
flexslider2のカルーセルをレスポンシブ対応する

カルーセルスライダーをレスポンシブ対応しました。有名なflexsliderで実装 …

thum_jquery
スクロールしたときに画像を読み込むことでページの表示を高速化させる

スマートフォン向けのサイトなど下に長く画像がたくさんあるページはよくあります。通 …

thum_jquery
flexsliderのmanualControlsを使ってサムネイルと連動させる

便利で有名なjqueryのスライダープラグインflexsliderですが、man …