オリジナルの縦スクロールバーを実装する方法

javascript

スクリプトを正常に動作させるためにを含むhtmlファイルに以下のように記述し、jquery.ScrollPane.jsとjquery.mousewheel.js、jQueryのフレームワークを参照させます。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

「jquery.mousewheel.js」は任意のスクリプトですが、マウスホイールを使ったスクロールに便利です。スクリプトの機能を基本の値で初期化するため以下のような記述が含まれています。

$(function(){
    $('scroll-pane').jScrollPane({
        showArrows:false,
        scrollbarWidth:43,
        dragMaxHeight:42
    });
});

html

以下にhtmlの記述例を示します。

<div class="scroll-pane"></div>

css

メインとなる「style.css」には以下のようにスクリプトに関連したスタイルが記述されています。

/*========================================*/
.jScrollPaneContainer {
    position: relative; 
    overflow: hidden; 
    z-index: 1; 
} 
.jScrollPaneTrack {
    position: absolute; 
    cursor: pointer; 
    right: 0; 
    top: 0; 
    height: 100%; 
    background: #aaa;
} 
.jScrollPaneDrag {
    position: absolute; 
    background: #666; 
    cursor: pointer; 
    overflow: hidden;
} 
.jScrollPaneDragTop {
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden;
} 
.jScrollPaneDragBottom {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    overflow: hidden;
} 
a.jScrollArrowUp {
    display: block; 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    right: 0; 
    text-indent: -2000px; 
    overflow: hidden; 
    /*background-color: #666;*/
    height: 9px;
} 
a.jScrollArrowUp:hover { 
    /*background-color: #f60;*/ 
} 
a.jScrollArrowDown {
    display: block; 
    position: absolute; 
    z-index: 1; 
    bottom: 0; 
    right: 0; 
    text-indent: -2000px; 
    overflow: hidden;
    /*background-color: #666;*/ 
    height: 9px;
} 
a.jScrollArrowDown:hover {
    /*background-color: #f60*/
} 
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
    /*background-color: #f00;*/
} 

Comments are closed.