Re:Start

いまはディレクターやってます

スクロールバーをオシャレにするjscrollpaneで矢印も使いたいよ！

JavaScript Frontend

ページ内のスクロール？

ああ、そういえばあんまり最近見かけないなぁ・・・

えっ、やるんすか・・・はぁい。。。

photo by Chris Yarzab

スクロールコーディングGETチャンス！

というわけで、jscrollpaneたんと、戯れてました。 3年前ぐらいに出てたライブラリなので、てっきり解説や利用例もあるだろうと鷹をくくってたら・・・ないんですわなぁ。または、なくてもイケル程度なのか！

結論から言うと、慣れてたら当たり前、なんでしょうね。ごめんなさい。 （実際、これのおかげで、今日同僚に聞かれたFlexSliderなんざ楽勝で解決でけました。えっへん！）

超万能jQueryスライダーFlexSliderの使い方を爆速で理解できる逆引きリスト9個 | weboost

いつかまた使う私のためのPOINT

まず、実際に作ったものを公開しておきましょう。 このように、CODEPENで試しながらやってました。

サンプルでも間違ってるものもあるので、出来る限りスッキリしたコードで、そのまま持ってきて動くものを見ながら、自分のくみたいものと照らし合わせていくのが早道かと思います。ただ、ページが読み込まれるときに、JS&CSSでソースが増えたりするので、単純にソースを見て組むのはNGです。

今回コードをいちばん参考にさせてもらったのは、

【jQuery】スクロールバーをオシャレにカスタマイズする「jScrollPane」の使い方 ｜ KLUTCHE

でした。実際に書いたコードは、こちら。

See the Pen LmpCK by chie (@chie) on CodePen.

外枠ではなく1段階中のスクロールさせたい箇所をJSで指定すること。

<div class="nikki">
  <div class="contents">
    /* contents */
  </div>
</div>

この場合は contentsですね。

矢印を表示したい場合は・・・

参考：jScrollPane theme demo: Lozenge

JSでオプション追加

$(function()
{
    $('.contents').jScrollPane(
        {
            showArrows: true,
            horizontalGutter: 10 /* added */
        }
    );
});

CSSで矢印部分を背景画像に差し替え

/* 全ての矢印 */
.jspArrow {
  display: block; 
  cursor : pointer;
  padding: 0;
  margin : 0;
  background: url(http://jscrollpane.kelvinluck.com/themes/lozenge/image/ui-icons_222222_256x240.png);
  /* 便宜上、jQueryUIのアイコンに直リンクさせてます、すみません */
}
/* 下矢印 */
.jspArrowDown {
  background-position: -64px 0 !important;
}

/* disabledつまり、スクロールバーがくっついてる時 */
.jspVerticalBar>.jspDisabled, .jspVerticalBar>.jspDisabled:hover, .jspHorizontalBar>.jspDisabled, .jspHorizontalBar>.jspDisabled:hover {
  background-image: url('http://jscrollpane.kelvinluck.com/themes/lozenge/image/ui-icons_888888_256x240.png');
  
     opacity  : 0.9;
      filter  : alpha( opacity=90 );
  -ms-filter  : alpha( opacity=90 );
}

この二つの処理を行えば、冒頭のサンプルのような見栄えになります。
なお、矢印を自作する場合は、16x16で作成ください。

引き続き、がんばりまうす。