jQuery

【jQuery】垂直スクロールパネルを作成。jQuery.scrollpanel

August 27, 2016

jQuery.scrollpanelは垂直スクロールパネルを作成するためのjQueryプラグイン。

$(selector).scrollpanel();

HTML

<div id='mycontainer'>

    <div class='sp-viewport'>
        <div class='sp-container'>
            Some text content.
            <span class='bar'/>
            <div class='foo'/>
        </div>
    </div>

    <div class='sp-scrollbar'>
        <div class='sp-thumb'/>
    </div>
</div>

オプション

$(selector).scrollpanel({
    prefix: 'sp-'
});

CSS

#mycontainer {
    width: 140px;
    height: 200px;
    border: 1px solid #ccc;

    .sp-scrollbar {
        width: 10px;
        margin: 4px;
        background-color: #ccc;
        cursor: pointer;

        .sp-thumb {
            background-color: #aaa;
        }
    }
    .sp-scrollbar.active
        .sp-thumb {
            background-color: #999;
        }
    }
}

MITライセンス

Demo/Download