jQuery Plugin"jScrollPane"でScrollbarのStyleを変更する

投稿日：

jquery-jScrollPaneScrollbarのDesignを変更する方法. CSSだけで出来るかと思ったらJavaScriptで実現した方がBrowser間の差異がなくていいみたい。

参考にしたSiteは下記

jScrollbarが良さそうだったけど、jQuery UIが必要だったので、
jQueryとjquery-mousewheel
だけで動く、jScrollPaneを使うことにした。

Wordpressで動かすためのSample.

必要なFileをfunctions.phpなどで設定

$base_url = get_template_directory_uri();
wp_enqueue_script('jquery', $base_url . '/js/jquery.js', null, '1.6.4');
wp_enqueue_script('jquery-mousewheel', $base_url . '/js/jquery.mousewheel.js', array( 'jquery'));
wp_enqueue_script('jquery-jscrollpane', $base_url . '/js/jquery.jscrollpane.js', array( 'jquery', 'jquery-mousewheel'));
wp_enqueue_style('jquery-jscrollpane', $base_url . '/css/jquery.jscrollpane.css' );

ScrollするContentsとPluginの呼び出し

<div class="scroll-pane">
...hoge...
</div>
<script>
jQuery(function($) {
    $('.scroll-pane').jScrollPane({autoReinitialise: true});
});
</script>

cssを調整

.home .jspVerticalBar {
    width: 5px;
    background: #333;
}
.home .jspDrag {
    background: #999;
}
.home .jspTrack {
    background: #333;
}

image

< 2012/04/17 Modified >
"autoReinitialise"をtrueに設定すると、reinitialiseIntervalで設定した時間ごとに再描画する。YouTubeなどをiframeで埋め込んでいると再読み込み時にぶれたりする（Firefox or IE）ので、Window Sizeを変更するときなど自前でjScrollPaneを初期化した方がいい。

jQuery(function($){
    var jFrame = $('#content').find('.page-content');
    jFrame.jScrollPane();

    $(window).resize(function(){
        jFrame.jScrollPane();
    });
    $(window).resize();
});

 

< Related Posts >